/* ================================================
   INSPACE RESELLERS MODULE - UNIFIED CSS v5.1
   Clean, deduplicated, mobile-first architecture
   Design Tokens aligned with design-tokens.md
   Last Updated: December 11, 2025
   ================================================ */

/* ================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   Aligned with: .claude/skills/inspace-landing-pages/references/design-tokens.md
   ================================================ */
:root {
  /* Color System - Reseller Industrial Theme */
  --color-black: #0a0a0a;
  --color-white: #ffffff;
  --color-lime: #c8ff00;
  --color-lime-dark: #a8d900;
  --color-lime-glow: rgba(200, 255, 0, 0.2);

  /* Legacy mappings for compatibility */
  --primary: #1a1f36;
  --primary-dark: #0f172a;
  --primary-light: #1e293b;
  --primary-rgb: 26, 31, 54;

  --requests-primary: #10b981;
  --requests-dark: #07855b;
  --requests-light: #a3ffd4;
  --requests-gradient: linear-gradient(135deg, #10b981 0%, #0ea875 100%);

  /* Reseller Accent (Lime for landing, Amber for app) */
  --reseller-primary: #10b981;
  --reseller-dark: #0ea875;
  --reseller-light: #a3ffd4;
  --reseller-gradient: linear-gradient(
    135deg,
    var(--reseller-dark) 0%,
    var(--reseller-primary) 100%
  );
  --reseller-gradient-light: linear-gradient(
    135deg,
    var(--reseller-light) 0%,
    var(--reseller-primary) 100%
  );
  --reseller-lime-gradient: linear-gradient(135deg, #c8ff00 0%, #a8d900 100%);

  /* Semantic Colors */
  --success: #22c55e;
  --success-dark: #16a34a;
  --success-light: #dcfce7;
  --warning: #f59e0b;
  --warning-dark: #d97706;
  --warning-light: #fef3c7;
  --danger: #ef4444;
  --danger-dark: #dc2626;
  --info: #3b82f6;
  --info-dark: #2563eb;
  --purple: #8b5cf6;
  --purple-dark: #7c3aed;

  /* Gray Scale (Neutral) */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Typography - Reseller Industrial */
  --font-display: "Space Mono", monospace;
  --font-body: "Outfit", "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Monaco", monospace;

  /* Spacing Scale (aligned with design-tokens.md) */
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-section: 8rem;

  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-h1: clamp(2rem, 5vw, 3rem);
  --text-h2: clamp(1.5rem, 4vw, 2.25rem);
  --text-h3: 1.35rem;

  /* Line Height */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* Touch Targets (WCAG AAA) */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 9999;
}

/* ================================================
   2. BASE RESET & DEFAULTS
   ================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--gray-50) 0%, #ffffff 100%);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--gray-900);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ================================================
   3. LAYOUT CONTAINERS
   ================================================ */
.main-container {
  width: 100%;
  padding: 0 var(--space-md);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .main-container {
    padding: 0 var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .main-container {
    max-width: 1200px;
    padding: var(--space-md) var(--space-lg);
  }
}

.section-content {
  min-height: 50vh;
  animation: fadeIn 0.4s ease-out;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .section-content {
    min-height: 60vh;
  }
}

/* ================================================
   4. ANIMATIONS
   ================================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================
   5. PAGE HEADER (Dark Theme - Mobile-First)
   ================================================ */
.page-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  border-radius: var(--space-xs);
  padding: var(--space-md);
  margin-bottom: 0;
  position: relative;
  overflow: visible; /* Changed from hidden to allow dropdowns to display */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.header-stats-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: end;
}

@media (min-width: 768px) {
  .page-header {
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  }
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit; /* Match parent border-radius */
  overflow: hidden; /* Clip gradients to rounded corners */
  background: radial-gradient(
      circle at 20% 80%,
      rgba(245, 158, 11, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(139, 92, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.page-header h1 {
  font-size: 1.25rem;
  font-weight: 800;
  color: white;
  margin: 0 0 2px 0;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
    margin-bottom: 4px;
  }
}

.header-subtitle {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .header-subtitle {
    font-size: 0.875rem;
    -webkit-line-clamp: none;
  }
}

/* Header Badge */
.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--reseller-light), 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid var(--reseller-dark);
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--reseller-light);
  margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .header-badge {
    padding: 6px 14px;
    font-size: 0.6875rem;
  }
}

.header-badge .pulse {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@media (min-width: 768px) {
  .header-badge .pulse {
    width: 8px;
    height: 8px;
  }
}

/* Header Icon */
.header-icon {
  width: 44px;
  height: 44px;
  background: var(--reseller-gradient);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(var(--reseller-dark), 0.25);
  flex-shrink: 0;
}

.header-icon i {
  font-size: 1.25rem;
  color: white;
}

@media (min-width: 768px) {
  .header-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25);
  }
  .header-icon i {
    font-size: 1.75rem;
  }
}

/* Header Quick Stats - Hidden on mobile */
.header-quick-stats {
  display: none;
}

@media (min-width: 992px) {
  .header-quick-stats {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 10px 16px;
    align-items: center;
    gap: 12px;
  }
}

.quick-stat {
  text-align: center;
  min-width: 50px;
}

.quick-stat-value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.quick-stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
}

.quick-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.15);
}

/* Header Meta - Horizontal scroll on mobile */
.header-meta {
  display: flex;
  gap: 8px;
  margin-top: var(--space-xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.header-meta::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .header-meta {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    overflow: visible;
  }
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .meta-item {
    font-size: 0.75rem;
    gap: 6px;
  }
}

.meta-item i {
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .meta-item i {
    font-size: 0.875rem;
  }
}

.meta-item strong {
  color: rgba(255, 255, 255, 0.9);
}

/* Header Actions - Compact on mobile */
.header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: var(--space-sm);
}

@media (min-width: 992px) {
  .header-actions {
    margin-top: 0;
    gap: 10px;
  }
}

.btn-header-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  transition: var(--transition-base);
  cursor: pointer;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .btn-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.125rem;
  }
}

.btn-header-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: white;
  transform: translateY(-2px);
}

.btn-header-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--reseller-gradient);
  border: none;
  border-radius: 10px;
  color: white;
  font-weight: 600;
  font-size: 0.8125rem;
  transition: var(--transition-base);
  box-shadow: 0 4px 16px rgba(var(--reseller-dark), 0.3);
  cursor: pointer;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .btn-header-primary {
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.9375rem;
    gap: 8px;
  }
}

.btn-header-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--reseller-primary), 0.4);
  color: white;
}

/* Page Header Dropdowns - Fix for clipping issue */
.page-header .dropdown {
  position: relative;
  z-index: var(--z-dropdown);
}

.page-header .dropdown-menu {
  position: absolute;
  z-index: calc(var(--z-dropdown) + 10);
  margin-top: 4px;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1e293b;
  backdrop-filter: blur(20px);
  min-width: 200px;
}

.page-header .dropdown-menu.show {
  animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-header .dropdown-header {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header .dropdown-item {
  color: rgba(255, 255, 255, 0.9);
  padding: 10px 16px;
  transition: var(--transition-fast);
  font-size: 0.875rem;
}

.page-header .dropdown-item:hover,
.page-header .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.page-header .dropdown-item i {
  width: 18px;
  text-align: center;
}

.page-header .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}

/* Requests Body Container */
.requests-body {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .requests-body {
    padding: 0 var(--space-md);
  }
}

/* ================================================
   6. STATS GRID & CARDS (Mobile-First)
   ================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-sm);
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    padding: 0 var(--space-md);
  }
}

@media (min-width: 992px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    padding: 0;
    margin-bottom: var(--space-md);
  }
}

/* Stats Card - Mobile-First Compact */
.stats-card {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--gray-300);
  transition: var(--transition-base);
  cursor: pointer;
  min-height: 56px;
}

@media (min-width: 576px) {
  .stats-card {
    padding: var(--space-md);
    gap: var(--space-md);
    min-height: 64px;
  }
}

.stats-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Active/selected state */
.stats-card:active,
.stats-card.active {
  transform: scale(0.98);
  box-shadow: var(--shadow-md);
}

.stats-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  background: var(--gray-100);
  color: var(--gray-600);
}

@media (min-width: 576px) {
  .stats-icon {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
  }
}

.stats-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  /* gap: var(--space-xs); */
}

.stats-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
  font-family: var(--font-mono);
}

@media (min-width: 576px) {
  .stats-number {
    font-size: 1.375rem;
  }
}

.stats-label {
  font-size: var(--text-xs);
  color: var(--gray-600);
  font-weight: 500;
  margin: 0;
}

@media (min-width: 576px) {
  .stats-label {
    font-size: var(--text-sm);
  }
}

.stats-trend {
  display: none;
}

/* Stats Card Variants */
.stats-card-primary {
  border-left-color: var(--info);
}
.stats-card-primary .stats-icon {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

.stats-card-success {
  border-left-color: var(--success);
}
.stats-card-success .stats-icon {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.stats-card-warning {
  border-left-color: var(--warning);
}
.stats-card-warning .stats-icon {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.stats-card-danger {
  border-left-color: var(--danger);
}
.stats-card-danger .stats-icon {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.stats-card-info {
  border-left-color: var(--info);
}
.stats-card-info .stats-icon {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

.stats-card-purple {
  border-left-color: var(--purple);
}
.stats-card-purple .stats-icon {
  background: rgba(139, 92, 246, 0.1);
  color: var(--purple);
}

/* Stat Card (Alternative naming) */
.stat-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--gray-300);
  transition: var(--transition-base);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
}
.stat-label {
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.stat-card-primary {
  border-left-color: var(--info);
}
.stat-card-primary .stat-icon {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

.stat-card-success {
  border-left-color: var(--success);
}
.stat-card-success .stat-icon {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.stat-card-warning {
  border-left-color: var(--warning);
}
.stat-card-warning .stat-icon {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.stat-card-danger {
  border-left-color: var(--danger);
}
.stat-card-danger .stat-icon {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.stat-card-info {
  border-left-color: var(--info);
}
.stat-card-info .stat-icon {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

/* ================================================
   7. SECTION CARDS (Mobile-First)
   ================================================ */
.section-card {
  background: white;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: var(--space-md);
  border: none;
  overflow: hidden;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .section-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: none;
    margin-bottom: var(--space-lg);
  }
}

.section-card-header,
.section-header {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--gray-200);
  background: linear-gradient(to bottom, var(--gray-50), white);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  position: sticky;
  top: 0;
  z-index: 10;
}

@media (min-width: 768px) {
  .section-card-header,
  .section-header {
    padding: var(--space-md);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    position: static;
  }
}

.section-header-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.section-card-title,
.section-header h5 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

@media (min-width: 768px) {
  .section-card-title,
  .section-header h5 {
    font-size: 1.125rem;
    gap: var(--space-sm);
  }
}

.section-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.section-header-actions::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .section-header-actions {
    width: auto;
    overflow: visible;
    gap: var(--space-sm);
  }
  .section-header-actions .btn {
    flex: none;
  }
}

.section-card-body,
.section-body {
  padding: 0;
}

@media (min-width: 768px) {
  .section-card-body,
  .section-body {
    padding: var(--space-md);
  }
}

.section-card-footer {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}

@media (min-width: 768px) {
  .section-card-footer {
    padding: var(--space-md);
  }
}

/* ================================================
   8. FILTER BAR (Mobile-First)
   ================================================ */
.filter-bar {
  background: white;
  border-bottom: 1px solid var(--gray-200);
  padding: var(--space-sm);
}

@media (min-width: 768px) {
  .filter-bar {
    background: var(--gray-50);
    padding: var(--space-md) var(--space-xl);
  }
}

.filter-bar-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: stretch;
}

@media (min-width: 768px) {
  .filter-bar-content {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
  }
}

/* Filter Search - Mobile First */
.filter-search {
  position: relative;
  width: 100%;
  order: 1;
}

@media (min-width: 768px) {
  .filter-search {
    flex: 0 0 auto;
    width: auto;
    min-width: 200px;
    max-width: 280px;
    order: 0;
  }
}

.filter-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 0.875rem;
  pointer-events: none;
}

.filter-search .form-control {
  padding-left: 36px;
  border-radius: var(--radius-md);
  border: 2px solid var(--gray-200);
  font-size: var(--text-sm);
  height: 40px;
  transition: var(--transition-base);
}

.filter-search .form-control:focus {
  border-color: var(--reseller-primary);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  outline: none;
}

/* Filter Selects - Stack on mobile, inline on desktop */
.filter-select {
  border-radius: var(--radius-md);
  border: 2px solid var(--gray-200);
  font-size: var(--text-sm);
  height: 40px;
  background-color: white;
  width: 100%;
}

@media (min-width: 768px) {
  .filter-select {
    width: auto;
    min-width: 140px;
    flex: 0 0 auto;
  }
}

.filter-select:focus {
  border-color: var(--reseller-primary);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  outline: none;
}

/* Active Filters */
.active-filters {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--gray-100);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.active-filters-label {
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-weight: 500;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* ================================================
   8.1 QUICK STATS BAR (Status Pipeline)
   ================================================ */
.quick-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  padding: var(--space-md);
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 575.98px) {
  .quick-stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

.quick-stat-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-base);
}

.quick-stat-item:hover {
  background: var(--gray-50);
}

.quick-stat-item:focus {
  outline: 2px solid var(--reseller-primary);
  outline-offset: 2px;
}

.quick-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.quick-stat-content {
  min-width: 0;
}

.quick-stat-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.quick-stat-label {
  font-size: var(--text-xs);
  color: var(--gray-500);
  white-space: nowrap;
}

/* Search Container - Mobile First */
.search-input-container {
  position: relative;
  width: 100%;
  order: 1;
}

@media (min-width: 768px) {
  .search-input-container {
    flex: 1;
    width: auto;
    min-width: 200px;
    max-width: 320px;
    order: 0;
  }
}

.search-input-container .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 0.875rem;
}

.search-input-container .form-control {
  padding-left: 36px;
  padding-right: 36px;
  border-radius: var(--radius-md);
  border: 2px solid var(--gray-200);
  font-size: var(--text-sm);
  height: var(--touch-target-min);
  transition: var(--transition-base);
}

.search-input-container .form-control:focus {
  border-color: var(--reseller-primary);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
  outline: none;
}

.search-input-container .form-control::placeholder {
  color: var(--gray-400);
  font-size: var(--text-sm);
}

/* Clear search button */
.clear-search {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--gray-500);
  cursor: pointer;
  opacity: 0;
  transition: var(--transition-fast);
}

.search-input-container .form-control:not(:placeholder-shown) + .clear-search,
.clear-search:focus {
  opacity: 1;
}

.clear-search:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}

/* Clear search button - Proposals Style */
.btn-clear-search {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}

.btn-clear-search:hover {
  color: var(--gray-600);
}

.btn-clear-search i {
  font-size: 14px;
}

/* ===== CLIENTS LIST VIEW - ENTERPRISE COLUMN WIDTHS ===== */
.requests-list-header .list-col-request,
.request-list-item .list-col-request {
  flex: 0 0 30%;
  /*min-width: 280px;*/
}

.requests-list-header .list-col-brand,
.request-list-item .list-col-brand {
  flex: 0 0 12%;
  min-width: 120px;
}

.requests-list-header .list-col-value,
.request-list-item .list-col-value {
  flex: 0 0 10%;
  min-width: 100px;
}

.requests-list-header .list-col-status,
.request-list-item .list-col-status {
  flex: 0 0 12%;
  min-width: 110px;
}

.requests-list-header .list-col-deadline,
.request-list-item .list-col-deadline {
  flex: 0 0 15%;
  min-width: 130px;
}

.requests-list-header .list-col-actions,
.request-list-item .list-col-actions {
  flex: 0 0 15%;
  min-width: 140px;
  justify-content: flex-end;
}

/* Client-specific styling */
.client-avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.client-type-badge-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 0.813rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Form Selects - Mobile Compact */
.form-select-enhanced {
  border-radius: var(--radius-md);
  border: 2px solid var(--gray-200);
  padding: 0 2rem 0 0.75rem;
  font-size: var(--text-sm);
  height: var(--touch-target-min);
  background-color: white;
  flex: 1;
  min-width: 0;
}

@media (min-width: 768px) {
  .form-select-enhanced {
    flex: none;
    min-width: 140px;
  }
}

.form-select-enhanced:focus {
  border-color: var(--reseller-primary);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
  outline: none;
}

/* Filter Row Layout */
.filter-bar > .d-flex {
  flex-wrap: wrap;
  gap: var(--space-xs) !important;
}

@media (min-width: 768px) {
  .filter-bar > .d-flex {
    flex-wrap: nowrap;
    gap: var(--space-sm) !important;
  }
}

/* Refresh Button */
.btn-refresh {
  height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  padding: 0 var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border-radius: var(--radius-md);
  border: 2px solid var(--gray-200);
  background: white;
  color: var(--gray-600);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: var(--transition-base);
}

.btn-refresh:hover {
  border-color: var(--reseller-primary);
  color: var(--reseller-primary);
  background: rgba(245, 158, 11, 0.05);
}

.btn-refresh:active {
  transform: scale(0.95);
}

/* Spinning animation for refresh */
.btn-refresh.loading i {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Active Filters */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--gray-200);
  margin-top: var(--space-sm);
}

.filter-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--reseller-primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
}

.filter-chip .remove-filter {
  cursor: pointer;
  opacity: 0.8;
}

.filter-chip .remove-filter:hover {
  opacity: 1;
}

/* ================================================
   9. ENTERPRISE CARDS (Request/Proposal - Mobile-First)
   ================================================ */
.enterprise-card {
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition-base);
  border: 1px solid var(--gray-200);
  position: relative;
}

@media (min-width: 768px) {
  .enterprise-card {
    border-radius: var(--radius-lg);
  }
}

.enterprise-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--reseller-gradient);
}

@media (min-width: 768px) {
  .enterprise-card::before {
    height: 4px;
  }
}

.enterprise-card:hover {
  box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
  .enterprise-card:hover {
    transform: translateY(-4px);
  }
}

/* Touch feedback on mobile */
.enterprise-card:active {
  transform: scale(0.99);
  box-shadow: var(--shadow-md);
}

.enterprise-card-urgent {
  border-color: var(--danger);
}
.enterprise-card-urgent::before {
  background: linear-gradient(90deg, var(--danger), var(--warning));
}

/* Enterprise Card Header - Compact on mobile */
.enterprise-card-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: var(--space-sm) var(--space-md);
  color: white;
}

@media (min-width: 768px) {
  .enterprise-card-header {
    padding: var(--space-md);
  }
}

.enterprise-card-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .enterprise-card-header-top {
    margin-bottom: var(--space-sm);
  }
}

.enterprise-card-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--reseller-primary);
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .enterprise-card-badge {
    font-size: var(--text-sm);
  }
}

.enterprise-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 2px 0;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .enterprise-card-title {
    font-size: var(--text-base);
    margin-bottom: 4px;
  }
}

.enterprise-card-subtitle {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

@media (min-width: 768px) {
  .enterprise-card-subtitle {
    font-size: var(--text-sm);
    gap: var(--space-sm);
  }
}

.client-avatar-sm {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--reseller-gradient);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
  color: white;
}

@media (min-width: 768px) {
  .client-avatar-sm {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
}

.enterprise-card-body {
  padding: var(--space-sm);
}

@media (min-width: 768px) {
  .enterprise-card-body {
    padding: var(--space-md);
  }
}

/* Enterprise Card Metrics Grid - 2x2 compact */
.enterprise-card-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}

@media (min-width: 768px) {
  .enterprise-card-metrics {
    gap: var(--space-sm);
  }
}

.enterprise-card-footer {
  padding: var(--space-sm) var(--space-md);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs);
}

@media (min-width: 768px) {
  .enterprise-card-footer {
    padding: var(--space-md);
    gap: var(--space-sm);
  }
}

.card-footer-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.6875rem;
  color: var(--gray-500);
}

@media (min-width: 768px) {
  .card-footer-meta {
    gap: var(--space-md);
    font-size: var(--text-xs);
  }
}

.card-footer-meta i {
  margin-right: 2px;
}

.card-footer-actions {
  display: flex;
  gap: var(--space-xs);
}

/* Enterprise Status Badge - Compact */
.status-badge-enterprise {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (min-width: 768px) {
  .status-badge-enterprise {
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--text-xs);
  }
}

.status-badge-pending {
  background: rgba(245, 158, 11, 0.2);
  color: #d97706;
}

.status-badge-overdue {
  background: rgba(239, 68, 68, 0.2);
  color: #dc2626;
}

.status-badge-success,
.status-badge-accepted {
  background: rgba(34, 197, 94, 0.2);
  color: #16a34a;
}

.status-badge-info {
  background: rgba(59, 130, 246, 0.2);
  color: #2563eb;
}

/* Enterprise Button - Touch-friendly */
.btn-enterprise-primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--reseller-gradient);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-base);
  min-height: 36px;
}

@media (min-width: 768px) {
  .btn-enterprise-primary {
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--text-sm);
    min-height: var(--touch-target-min);
  }
}

.btn-enterprise-primary:hover {
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

@media (min-width: 768px) {
  .btn-enterprise-primary:hover {
    transform: translateY(-2px);
  }
}

/* Card Metrics Grid - Compact mobile */
.card-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}

@media (min-width: 768px) {
  .card-metrics {
    gap: var(--space-sm);
  }
}

.metric-item {
  padding: var(--space-xs) var(--space-sm);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

@media (min-width: 768px) {
  .metric-item {
    padding: var(--space-sm) var(--space-md);
    border-left-width: 3px;
    gap: var(--space-sm);
  }
}

.metric-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  background: var(--gray-100);
  color: var(--gray-600);
}

@media (min-width: 768px) {
  .metric-icon {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }
}

.metric-content {
  flex: 1;
  min-width: 0;
}

.metric-label {
  font-size: 0.5625rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .metric-label {
    font-size: var(--text-xs);
  }
}

.metric-value {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-900);
  font-family: var(--font-mono);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .metric-value {
    font-size: var(--text-base);
  }
}

/* Metric Variants */
.metric-item-primary {
  border-left-color: var(--info);
}
.metric-item-primary .metric-icon {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

.metric-item-success {
  border-left-color: var(--success);
}
.metric-item-success .metric-icon {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.metric-item-warning {
  border-left-color: var(--warning);
}
.metric-item-warning .metric-icon {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.metric-item-danger {
  border-left-color: var(--danger);
}
.metric-item-danger .metric-icon {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.metric-item-info {
  border-left-color: var(--info);
}
.metric-item-info .metric-icon {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

.metric-item-purple {
  border-left-color: var(--purple);
}
.metric-item-purple .metric-icon {
  background: rgba(139, 92, 246, 0.1);
  color: var(--purple);
}

/* ================================================
   10. STATUS BADGES
   ================================================ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-active,
.status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning-dark);
}

.status-completed,
.status-accepted,
.status-selected {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success-dark);
}

.status-expired,
.status-rejected,
.status-declined {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger-dark);
}

.status-draft {
  background: rgba(107, 114, 128, 0.1);
  color: var(--gray-600);
}

.status-submitted {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info-dark);
}

/* ================================================
   11. TABLES (Mobile-First)
   ================================================ */
.table {
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-size: var(--text-sm);
  margin-bottom: 0;
  border-collapse: collapse;
}

@media (min-width: 768px) {
  .table {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
}

/* Hide table header on mobile - show cards instead */
.table thead {
  display: none;
}

@media (min-width: 992px) {
  .table thead {
    display: table-header-group;
  }
}

.table thead th {
  border: none;
  background: var(--gray-50);
  font-weight: 600;
  color: var(--gray-700);
  padding: var(--space-sm) var(--space-md);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Mobile: Each row becomes a card */
.table tbody tr {
  display: flex;
  background: white;
  border-bottom: 1px solid var(--gray-200);
  padding: var(--space-md);
  transition: var(--transition-fast);
}

.table tbody tr:active {
  background: var(--gray-50);
}

@media (min-width: 992px) {
  .table tbody tr {
    display: table-row;
    padding: 0;
    border-bottom: 1px solid var(--gray-100);
  }

  .table tbody tr:hover {
    background: rgba(245, 158, 11, 0.02);
  }
}

/* Mobile: Each cell stacks */
.table tbody td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) 0;
  border: none;
}

.table tbody td::before {
  content: attr(data-label);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--gray-500);
  flex-shrink: 0;
  margin-right: var(--space-md);
}

@media (min-width: 992px) {
  .table tbody td {
    display: table-cell;
    padding: var(--space-md);
    vertical-align: middle;
  }

  .table tbody td::before {
    display: none;
  }
}

/* Hide checkbox column on mobile 
.table tbody td:first-child {
  display: none;
} */

@media (min-width: 992px) {
  .table tbody td:first-child {
    display: table-cell;
  }
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overflow-x: auto;
}

/* Table Enhanced - Used in requests */
.table-enhanced {
  width: 100%;
}

.table-enhanced tbody tr {
  border-left: 3px solid transparent;
}

.table-enhanced tbody tr:hover {
  border-left-color: var(--reseller-primary);
}

/* Requests Table Body - Mobile Card View */
#requests-table-body tr {
  position: relative;
}

@media (max-width: 991.98px) {
  #requests-table-body tr {
    display: block;
    background: white;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--reseller-primary);
  }

  #requests-table-body tr:active {
    transform: scale(0.99);
    box-shadow: var(--shadow-md);
  }

  #requests-table-body td {
    display: block;
    padding: var(--space-xs) 0 !important;
    border: none !important;
    text-align: left !important;
  }

  #requests-table-body td:first-child {
    display: none !important;
  }

  #requests-table-body td:last-child {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm) !important;
    border-top: 1px solid var(--gray-200) !important;
  }

  #requests-table-body td:before {
    content: attr(data-label);
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
    margin-bottom: 2px;
  }
}

/* View Containers */
#table-view-container,
#list-view-container,
#card-view-container {
  animation: fadeIn 0.3s ease-out;
}

/* Requests List Container (List View) */
.requests-list-container {
  border-top: 1px solid var(--gray-200);
}

@media (min-width: 768px) {
  .requests-list-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    margin: var(--space-md);
  }
}

/* Requests Cards Container */
#requests-cards-container {
  padding: var(--space-sm) !important;
}

@media (min-width: 768px) {
  #requests-cards-container {
    padding: var(--space-md) !important;
  }
}

/* Empty State */
.empty-state {
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  font-size: 1.5rem;
  color: var(--gray-400);
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-xs);
}

.empty-state-text {
  font-size: var(--text-sm);
  color: var(--gray-500);
  max-width: 320px;
  margin: 0 auto;
}

/* Loading State */
.loading-state {
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--reseller-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-md);
}

/* ================================================
   12. BUTTONS (Mobile-First)
   ================================================ */
.btn {
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-weight: 500;
  transition: var(--transition-base);
  border-radius: var(--radius-md);
  padding: 0 var(--space-md);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Small buttons for dense UIs */
.btn-sm {
  min-height: 32px;
  padding: 0 var(--space-sm);
  font-size: var(--text-xs);
  gap: 4px;
}

.btn-primary {
  background: var(--reseller-primary) !important;
  border: none;
  color: white;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.35);
}

.btn-success {
  background: linear-gradient(
    135deg,
    var(--success) 0%,
    var(--success-dark) 100%
  );
  border: none;
  color: white;
}

.btn-danger {
  background: linear-gradient(
    135deg,
    var(--danger) 0%,
    var(--danger-dark) 100%
  );
  border: none;
  color: white;
}

.btn-warning {
  background: var(--reseller-gradient);
  border: none;
  color: white;
}

/* View Toggle Buttons - Mobile Optimized */
.btn-group {
  display: inline-flex;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--gray-200);
  flex-direction: row;
}

.btn-group .btn {
  border-radius: 0;
  border: none;
  min-height: 36px;
  padding: 0 var(--space-sm);
  background: white;
  color: var(--gray-500);
  box-shadow: none;
  margin-bottom: 0;
}

.btn-group .btn:hover {
  background: var(--gray-50);
  color: var(--gray-700);
  transform: none;
}

.btn-group .btn.active,
.btn-group .btn:active {
  background: var(--reseller-gradient);
  color: white;
}

.btn-group .btn + .btn {
  border-left: 1px solid var(--gray-200);
}

.btn-group .btn.active + .btn,
.btn-group .btn + .btn.active {
  border-left-color: transparent;
}

/* Outline buttons */
.btn-outline-secondary {
  background: white;
  border: 2px solid var(--gray-200);
  color: var(--gray-600);
}

.btn-outline-secondary:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.btn-outline-secondary.active {
  background: var(--reseller-gradient);
  border-color: var(--reseller-primary);
  color: white;
}

/* Purple button variant */
.btn-outline-purple {
  background: white;
  border: 2px solid var(--purple);
  color: var(--purple);
}

.btn-outline-purple:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: var(--purple);
  color: var(--purple);
}

.btn-purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border: none;
  color: white;
}

.btn-purple:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: white;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* ================================================
   13. FORMS
   ================================================ */
.form-control,
.form-select {
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 0.75rem var(--space-md);
  font-size: var(--text-base);
  min-height: var(--touch-target-comfortable);
  transition: var(--transition-base);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--reseller-primary);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
  outline: none;
}

.form-label {
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-sm);
  font-size: var(--text-sm);
}

/* ================================================
   14. ENTERPRISE MODALS (Mobile-First Fullscreen)
   ================================================ */

/* Enterprise Modal - Fullscreen on mobile, centered on desktop */
.modal-enterprise {
  --modal-header-height: 60px;
  --modal-footer-height: 72px;
}

/* Mobile: Fullscreen (default) */
.modal-enterprise .modal-dialog {
  margin: 0;
  max-width: 100%;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
}

.modal-enterprise .modal-content {
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
}

/* Desktop: Centered with max-width */
@media (min-width: 768px) {
  .modal-enterprise .modal-dialog {
    margin: 2rem auto;
    max-width: 900px;
    width: 90vw;
    height: auto;
    max-height: calc(100vh - 4rem);
  }

  .modal-enterprise .modal-content {
    border-radius: 16px;
    height: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }
}

/* Large Desktop: Even more constrained */
@media (min-width: 1200px) {
  .modal-enterprise .modal-dialog {
    max-width: 1000px;
    width: 85vw;
  }
}

/* Enterprise Modal Header - Sticky */
.modal-enterprise .modal-header {
  flex-shrink: 0;
  background: linear-gradient(135deg, #065f46 0%, #047857 100%);
  color: white;
  border-radius: 0;
  border: none;
  padding: var(--space-sm) var(--space-md);
  min-height: var(--modal-header-height);
  padding-top: calc(var(--space-sm) + env(safe-area-inset-top));
  position: sticky;
  top: 0;
  z-index: 10;
}

@media (min-width: 768px) {
  .modal-enterprise .modal-header {
    padding: var(--space-md) var(--space-lg);
    min-height: 72px;
  }
}

.modal-enterprise .modal-header .modal-title {
  font-size: var(--text-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .modal-enterprise .modal-header .modal-title {
    font-size: var(--text-xl);
  }
}

.modal-enterprise .modal-header .modal-subtitle {
  font-size: var(--text-xs);
  opacity: 0.7;
  margin-top: 2px;
}

/* Enterprise Header Badge */
.modal-enterprise .modal-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-enterprise .modal-header .align-items-center {
  flex-direction: row-reverse;
}

/* Enterprise Modal Body - Scrollable */
.modal-enterprise .modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-xs);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (min-width: 768px) {
  .modal-enterprise .modal-body {
    padding: var(--space-lg) var(--space-xl);
  }
}

/* Centered content container for desktop */
.modal-enterprise .modal-body-inner {
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .modal-enterprise .modal-body-inner {
    max-width: 900px;
  }
}

/* Enterprise Modal Footer - Sticky */
.modal-enterprise .modal-footer {
  flex-shrink: 0;
  background: white;
  border-top: 1px solid var(--gray-200);
  padding: var(--space-sm) var(--space-md);
  padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
  min-height: var(--modal-footer-height);
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

@media (max-width: 575.98px) {
  .modal-enterprise .modal-footer {
    flex-direction: row;
  }

  .modal-enterprise .modal-footer .btn {
    min-height: var(--touch-target-comfortable);
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .modal-enterprise .modal-footer {
    padding: var(--space-md) var(--space-xl);
  }
}

/* Enterprise Close Button */
.modal-enterprise .btn-close-enterprise {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: white;
  font-size: 1.25rem;
  transition: var(--transition-base);
  cursor: pointer;
  padding: 0;
}

.modal-enterprise .btn-close-enterprise:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

/* Enterprise Modal Section Cards */
.modal-enterprise .modal-section {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-sx);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .modal-enterprise .modal-section {
    padding: var(--space-lg);
  }
}

.modal-enterprise .modal-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--gray-200);
}

.modal-enterprise .modal-section-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.modal-enterprise .modal-section-icon.icon-primary {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

.modal-enterprise .modal-section-icon.icon-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.modal-enterprise .modal-section-icon.icon-success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.modal-enterprise .modal-section-icon.icon-purple {
  background: rgba(139, 92, 246, 0.1);
  color: var(--purple);
}

.modal-enterprise .modal-section-title {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
  color: var(--gray-900);
}

/* Enterprise Modal List Items */
.modal-enterprise .modal-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
  transition: var(--transition-base);
  cursor: pointer;
  min-height: var(--touch-target-comfortable);
}

.modal-enterprise .modal-list-item:hover {
  border-color: var(--info);
  background: rgba(59, 130, 246, 0.02);
  transform: translateX(4px);
}

.modal-enterprise .modal-list-item:active {
  transform: scale(0.99);
}

.modal-enterprise .modal-list-item.selected {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.05);
}

.modal-enterprise .modal-list-item.urgent {
  border-left: 4px solid var(--danger);
}

.modal-enterprise .modal-list-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  background: var(--gray-100);
  color: var(--gray-600);
}

.modal-enterprise .modal-list-content {
  flex: 1;
  min-width: 0;
}

.modal-enterprise .modal-list-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--gray-900);
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.modal-enterprise .modal-list-subtitle {
  font-size: var(--text-xs);
  color: var(--gray-500);
}

.modal-enterprise .modal-list-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.modal-enterprise .modal-list-value {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--success);
}

.modal-enterprise .modal-list-badge {
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: 100px;
}

/* Enterprise Modal Action Buttons (Large Touch Targets) */
.modal-enterprise .modal-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 576px) {
  .modal-enterprise .modal-action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.modal-enterprise .modal-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-200);
  background: white;
  cursor: pointer;
  transition: var(--transition-base);
  text-align: center;
  min-height: 140px;
}

.modal-enterprise .modal-action-btn:hover {
  border-color: var(--info);
  background: rgba(59, 130, 246, 0.02);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.modal-enterprise .modal-action-btn:active {
  transform: scale(0.98);
}

.modal-enterprise .modal-action-btn.btn-success {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.05);
}

.modal-enterprise .modal-action-btn.btn-success:hover {
  background: rgba(34, 197, 94, 0.1);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2);
}

.modal-enterprise .modal-action-btn.btn-danger {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.02);
}

.modal-enterprise .modal-action-btn.btn-danger:hover {
  background: rgba(239, 68, 68, 0.08);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2);
}

.modal-enterprise .modal-action-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
  line-height: 1;
}

.modal-enterprise .modal-action-title {
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: 4px;
}

.modal-enterprise .modal-action-subtitle {
  font-size: var(--text-xs);
  color: var(--gray-500);
}

/* Enterprise Empty State */
.modal-enterprise .modal-empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
}

.modal-enterprise .modal-empty-icon {
  font-size: 4rem;
  color: var(--gray-300);
  margin-bottom: var(--space-md);
}

.modal-enterprise .modal-empty-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: var(--space-xs);
}

.modal-enterprise .modal-empty-text {
  font-size: var(--text-sm);
  color: var(--gray-500);
  max-width: 400px;
  margin: 0 auto var(--space-lg);
}

/* ================================================
   ENTERPRISE FULLSCREEN MODAL SYSTEM
   Mobile-first 100vh x 100vw design
   ================================================ */
 @media (max-width: 767.98px) {

  /* Enterprise Fullscreen Dialog */
  .modal-enterprise-fullscreen {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
  }

  /* Enterprise Fullscreen Content */
  .modal-enterprise-content {
    border: none !important;
    border-radius: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--gray-50) !important;
    overflow: hidden !important;
  }
}
/* Enterprise Modal Header - Sticky Top */
.modal-enterprise-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  padding-top: calc(var(--space-sm) + env(safe-area-inset-top));
  min-height: 64px;
  color: white;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #065f46 0%, #047857 100%);
}

@media (min-width: 768px) {
  .modal-enterprise-header {
    padding: var(--space-md) var(--space-xl);
    min-height: 72px;
  }
}

.modal-enterprise-header-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

.modal-enterprise-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.modal-enterprise-title-group {
  flex: 1;
  min-width: 0;
}

.modal-enterprise-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .modal-enterprise-title {
    font-size: var(--text-xl);
  }
}

.modal-enterprise-subtitle {
  font-size: var(--text-xs);
  opacity: 0.8;
  margin-top: 2px;
}

.modal-enterprise-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.modal-enterprise-close-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  transition: var(--transition-base);
  margin-left: var(--space-sm);
}

.modal-enterprise-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.modal-enterprise-close-btn:active {
  transform: scale(0.95);
}

/* Enterprise Modal Body - Scrollable */
.modal-enterprise-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-xs);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--gray-50);
}

@media (min-width: 768px) {
  .modal-enterprise-body {
    padding: var(--space-lg) var(--space-xl);
  }
}

@media (min-width: 1200px) {
  .modal-enterprise-body {
    padding: var(--space-xl) var(--space-2xl);
  }
}

/* Body Inner Container - Max Width for Readability */
.modal-enterprise-body-inner {
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 1400px) {
  .modal-enterprise-body-inner {
    max-width: 900px;
  }
}

/* Enterprise Modal Footer - Sticky Bottom */
.modal-enterprise-footer {
  flex-shrink: 0;
  background: white;
  border-top: 1px solid var(--gray-200);
  padding: var(--space-sm) var(--space-md);
  padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  position: sticky;
  bottom: 0;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .modal-enterprise-footer {
    padding: var(--space-md) var(--space-xl);
    min-height: 80px;
  }
}

.modal-enterprise-footer-left,
.modal-enterprise-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.modal-enterprise-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Mobile: Stack footer buttons */
@media (max-width: 575.98px) {
  .modal-enterprise-footer {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .modal-enterprise-footer-left,
  .modal-enterprise-footer-right,
  .modal-enterprise-actions {
    width: 100%;
  }

  .modal-enterprise-footer .btn {
    flex: 1;
    min-height: var(--touch-target-comfortable);
    justify-content: center;
  }
}

/* Enterprise Modal Section Cards */
.modal-enterprise-section {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
}

@media (min-width: 768px) {
  .modal-enterprise-section {
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
  }
}

.modal-enterprise-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--gray-100);
}

.modal-enterprise-section-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.modal-enterprise-section-icon.icon-primary {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

.modal-enterprise-section-icon.icon-success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.modal-enterprise-section-icon.icon-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.modal-enterprise-section-icon.icon-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.modal-enterprise-section-icon.icon-purple {
  background: rgba(139, 92, 246, 0.1);
  color: var(--purple);
}

.modal-enterprise-section-title {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
  color: var(--gray-900);
}

/* Enterprise Action Cards (Accept/Decline Choices) */
.modal-enterprise-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 576px) {
  .modal-enterprise-action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.modal-enterprise-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-200);
  background: white;
  cursor: pointer;
  transition: var(--transition-base);
  min-height: 160px;
}

.modal-enterprise-action-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.modal-enterprise-action-card:active {
  transform: scale(0.98);
}

.modal-enterprise-action-card.action-success {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.03);
}

.modal-enterprise-action-card.action-success:hover {
  background: rgba(34, 197, 94, 0.08);
  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.25);
}

.modal-enterprise-action-card.action-danger {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.02);
}

.modal-enterprise-action-card.action-danger:hover {
  background: rgba(239, 68, 68, 0.06);
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.2);
}

.modal-enterprise-action-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  line-height: 1;
}

.action-success .modal-enterprise-action-icon {
  color: var(--success);
}

.action-danger .modal-enterprise-action-icon {
  color: var(--danger);
}

.modal-enterprise-action-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--gray-900);
}

.modal-enterprise-action-subtitle {
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: 1.4;
}

/* Enterprise Info Card */
.modal-enterprise-info-card {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  border: 1px solid var(--gray-200);
}

.modal-enterprise-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .modal-enterprise-info-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.modal-enterprise-info-item {
  text-align: center;
}

.modal-enterprise-info-label {
  font-size: var(--text-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.modal-enterprise-info-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--gray-900);
}

.modal-enterprise-info-value.text-success {
  color: var(--success);
}

/* Enterprise List Items */
.modal-enterprise-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
  transition: var(--transition-base);
  cursor: pointer;
  min-height: var(--touch-target-comfortable);
}

.modal-enterprise-list-item:hover {
  border-color: var(--info);
  background: rgba(59, 130, 246, 0.02);
  transform: translateX(4px);
}

.modal-enterprise-list-item:active {
  transform: scale(0.99);
}

.modal-enterprise-list-item.selected {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.05);
  border-width: 2px;
}

.modal-enterprise-list-item.urgent {
  border-left: 4px solid var(--danger);
}

/* Enterprise Decline Section */
.modal-enterprise-decline-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-200);
}

/* Buttons for Enterprise Modals */
.btn-enterprise-primary {
  background: var(--reseller-gradient);
  border: none;
  color: white;
  font-weight: 600;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  min-height: var(--touch-target-comfortable);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-enterprise-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: white;
}

.btn-enterprise-secondary {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  font-weight: 600;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  min-height: var(--touch-target-comfortable);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-enterprise-secondary:hover {
  background: var(--gray-200);
  border-color: var(--gray-400);
  color: var(--gray-800);
}

/* ================================================
   ENTERPRISE PROPOSAL MODAL - Create/Edit Proposal
   Mobile-First Design with Step-Based Workflow
   ================================================ */

/* Proposal Modal Base */
#enterpriseProposalModal .modal-enterprise-content {
  background: #f8fafc;
}

/* Proposal Loading Modal */
#proposalLoadingModal .modal-content {
  border-radius: 20px;
  overflow: hidden;
}

#proposalLoadingModal .loading-phase {
  transition: opacity 0.3s ease;
}

#proposalLoadingModal .progress {
  border-radius: 100px;
  overflow: hidden;
}

#proposalLoadingModal .progress-bar {
  transition: width 0.3s ease;
}

/* Proposal Steps Container */
.proposal-steps-container {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: var(--space-xs);
  position: sticky;
  top: 0;
  z-index: 10;
}

.proposal-steps-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 700px;
  margin: 0 auto;
}

.proposal-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.3s ease;
  padding: 0 8px;
}

.proposal-step-item.active {
  opacity: 1;
}

.proposal-step-item.completed {
  opacity: 0.85;
}

.proposal-step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  border: 3px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.proposal-step-item.active .proposal-step-number {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
  border-color: white;
  transform: scale(1.1);
}

.proposal-step-item.completed .proposal-step-number {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.proposal-step-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: #64748b;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.proposal-step-item.active .proposal-step-label {
  color: #4f46e5;
  font-weight: 700;
}

.proposal-step-item.completed .proposal-step-label {
  color: #059669;
}

.proposal-step-connector {
  flex: 0 0 40px;
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
  margin-bottom: 24px;
  transition: background 0.3s ease;
}

.proposal-step-item.completed + .proposal-step-connector,
.proposal-step-connector.completed {
  background: linear-gradient(90deg, #10b981, #34d399);
}

/* Proposal Info Cards */
.proposal-info-card {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.proposal-info-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.proposal-info-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.proposal-info-card-header.header-dark {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: white;
  border-bottom: none;
}

.proposal-info-card-header.header-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  border-bottom: none;
}

.proposal-info-card-header.header-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-bottom: none;
}

.proposal-info-card-header.header-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #1e293b;
  border-bottom: none;
}

.proposal-info-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.header-dark .proposal-info-icon {
  background: rgba(255, 255, 255, 0.1);
  color: #818cf8;
}

.header-primary .proposal-info-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.header-success .proposal-info-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.header-warning .proposal-info-icon {
  background: rgba(30, 41, 59, 0.1);
  color: #1e293b;
}

.proposal-info-card-title {
  font-weight: 600;
  font-size: 0.9375rem;
  margin: 0;
}

.proposal-info-card-body {
  padding: 20px;
}

/* Proposal Form Fields */
.proposal-field-group {
  margin-bottom: 16px;
}

.proposal-field-group:last-child {
  margin-bottom: 0;
}

.proposal-field-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 6px;
}

.proposal-field-value {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1e293b;
}

.proposal-field-value.value-mono {
  font-family: var(--font-mono, monospace);
  color: #6366f1;
}

.proposal-input {
  border-radius: 10px;
  border: 2px solid #e2e8f0;
  padding: 12px 16px;
  font-size: 0.9375rem;
  transition: all 0.2s ease;
}

.proposal-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  outline: none;
}

.proposal-input::placeholder {
  color: #94a3b8;
}

/* Brand Discount Cards - Step 2 */
.brand-discount-card {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  background: white;
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

.brand-discount-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.brand-discount-card:last-child {
  margin-bottom: 0;
}

.brand-discount-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  gap: 12px;
}

.brand-discount-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-discount-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: white;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #64748b;
  flex-shrink: 0;
  overflow: hidden;
}

.brand-discount-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.brand-discount-logo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 1rem;
}

.brand-discount-name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #1e293b;
}

.brand-discount-count {
  font-size: 0.75rem;
  color: #64748b;
  background: white;
  padding: 2px 10px;
  border-radius: 100px;
  border: 1px solid #e2e8f0;
}

.brand-discount-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.brand-discount-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-discount-field label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.brand-discount-field select,
.brand-discount-field input {
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  padding: 8px 12px;
  font-size: 0.875rem;
  min-width: 120px;
}

.brand-discount-field select:focus,
.brand-discount-field input:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.brand-discount-subtotal {
  text-align: right;
}

.brand-discount-subtotal-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 2px;
}

.brand-discount-subtotal-value {
  font-weight: 700;
  font-size: 1.125rem;
  color: #16a34a;
}

/* Brand Items Collapse */
.brand-items-collapse {
  border-top: 1px solid #e2e8f0;
  background: white;
}

.brand-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.brand-item-row:last-child {
  border-bottom: none;
}

.brand-item-image {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  background: #f1f5f9;
  flex-shrink: 0;
}

.brand-item-placeholder {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.brand-item-details {
  flex: 1;
  min-width: 0;
}

.brand-item-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: #1e293b;
  margin-bottom: 2px;
}

.brand-item-ref {
  font-size: 0.75rem;
  color: #64748b;
  font-family: var(--font-mono, monospace);
}

.brand-item-pricing {
  text-align: right;
  flex-shrink: 0;
}

.brand-item-qty {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 2px;
}

.brand-item-price {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #1e293b;
}

.brand-items-toggle {
  padding: 12px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
}

.brand-items-toggle .btn {
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 8px 16px;
}

/* Summary Cards - Step 4 */
.proposal-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .proposal-summary-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.proposal-summary-card {
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.proposal-summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.proposal-summary-card.card-original {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
}

.proposal-summary-card.card-original::before {
  background: linear-gradient(90deg, #64748b, #94a3b8);
}

.proposal-summary-card.card-discount {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fecaca;
}

.proposal-summary-card.card-discount::before {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.proposal-summary-card.card-fees {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
}

.proposal-summary-card.card-fees::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.proposal-summary-card.card-total {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
}

.proposal-summary-card.card-total::before {
  background: linear-gradient(90deg, #10b981, #059669);
}

.proposal-summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 8px;
}

.proposal-summary-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
}

.card-discount .proposal-summary-value {
  color: #dc2626;
}

.card-fees .proposal-summary-value {
  color: #d97706;
}

.card-total .proposal-summary-value {
  color: #059669;
}

/* ================================================
   Brand Summary (Step 4) - Mobile-First
   ================================================ */
.brand-summary-container {
  background: white;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

.brand-summary-header {
  display: none;
  background: #f8fafc;
  padding: 12px 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

@media (min-width: 768px) {
  .brand-summary-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
  }
}

.brand-summary-row {
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  gap: 12px;
}

.brand-summary-row:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .brand-summary-row {
    display: grid;
    grid-template-columns: 2fr 3fr;
    align-items: center;
    gap: 16px;
  }
}

.brand-summary-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  font-size: 1rem;
  flex-shrink: 0;
  overflow: hidden;
}

.brand-summary-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.brand-summary-icon-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  font-size: 1rem;
}

.brand-summary-details {
  flex: 1;
  min-width: 0;
}

.brand-summary-name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-summary-meta {
  font-size: 0.8125rem;
  color: #64748b;
}

.brand-summary-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}

@media (min-width: 768px) {
  .brand-summary-pricing {
    gap: 16px;
  }
}

.brand-summary-original,
.brand-summary-discount,
.brand-summary-final {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-summary-original::before,
.brand-summary-discount::before,
.brand-summary-final::before {
  content: attr(data-label);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

@media (min-width: 768px) {
  .brand-summary-original::before,
  .brand-summary-discount::before,
  .brand-summary-final::before {
    display: none;
  }
}

.brand-summary-original {
  font-size: 0.875rem;
  color: #64748b;
}

.brand-summary-discount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.discount-badge {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #dc2626;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
}

.discount-amount {
  font-size: 0.75rem;
  color: #dc2626;
}

.brand-summary-final {
  font-size: 1rem;
  font-weight: 700;
  color: #059669;
}

/* Proposal Alert Boxes */
.proposal-alert {
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: none;
}

.proposal-alert-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.proposal-alert.alert-info {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1e40af;
}

.proposal-alert.alert-success {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #065f46;
}

.proposal-alert.alert-warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #92400e;
}

/* Proposal Footer */
#enterpriseProposalModal .modal-enterprise-footer {
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: 16px 24px;
}

#enterpriseProposalModal .modal-enterprise-footer .btn {
  min-height: 44px;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 20px;
}

#enterpriseProposalModal .modal-enterprise-footer .btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border: none;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

#enterpriseProposalModal .modal-enterprise-footer .btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

#enterpriseProposalModal .modal-enterprise-footer .btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

#enterpriseProposalModal .modal-enterprise-footer .btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

#enterpriseProposalModal .modal-enterprise-footer .btn-outline-primary {
  border-width: 2px;
}

/* Mobile Responsive */
@media (max-width: 575.98px) {
  .proposal-steps-wrapper {
    gap: 4px;
    padding: 0 8px;
  }

  .proposal-step-number {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
  }

  .proposal-step-label {
    font-size: 0.625rem;
  }

  .proposal-step-connector {
    flex: 0 0 20px;
  }

  .brand-discount-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .brand-discount-controls {
    width: 100%;
    justify-content: space-between;
  }

  .brand-discount-field {
    flex: 1;
  }

  .brand-discount-subtotal {
    width: 100%;
    text-align: left;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
  }

  .brand-item-row {
    flex-wrap: wrap;
  }

  .brand-item-pricing {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
  }

  .brand-item-qty {
    margin-bottom: 0;
  }

  .proposal-summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .proposal-summary-card {
    padding: 14px;
  }

  .proposal-summary-value {
    font-size: 1.25rem;
  }

  #enterpriseProposalModal .modal-enterprise-footer {
    flex-direction: column;
    gap: 12px;
  }

  #enterpriseProposalModal .modal-enterprise-footer > div {
    width: 100%;
  }

  #enterpriseProposalModal .modal-enterprise-footer .btn {
    width: 100%;
    justify-content: center;
  }

  #enterpriseProposalModal .modal-enterprise-footer .d-flex {
    flex-direction: column;
    width: 100%;
  }
}

/* ================================================
   REQUEST DETAILS MODAL - Enterprise Grade
   Mobile-First Design with Premium UX
   ================================================ */

/* Request Details Modal Specific Styles */
#requestDetailsModal .modal-enterprise-content {
  background: #f8fafc;
}

/* Premium Header */
#requestDetailsModal .modal-enterprise-header {
  background: linear-gradient(135deg, #065f46 0%, #047857 100%);
  min-height: 70px;
}

@media (min-width: 768px) {
  #requestDetailsModal .modal-enterprise-header {
    min-height: 80px;
  }
}

/* Request ID Badge in Header */
.request-modal-id {
  font-family: var(--font-mono, "SF Mono", "Fira Code", Consolas, monospace);
  font-size: 0.875rem;
  color: #818cf8;
  font-weight: 600;
}

/* Status Alert Banner */
.request-status-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.request-status-banner.status-active {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
}

.request-status-banner.status-completed {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
}

.request-status-banner.status-expired {
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  border: 1px solid #fde047;
}

.request-status-banner.status-cancelled {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fecaca;
}

.request-status-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.status-active .request-status-icon {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.status-completed .request-status-icon {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.status-expired .request-status-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.status-cancelled .request-status-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.request-status-content {
  flex: 1;
  min-width: 0;
}

.request-status-title {
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 2px;
}

.status-active .request-status-title {
  color: #1e40af;
}
.status-completed .request-status-title {
  color: #166534;
}
.status-expired .request-status-title {
  color: #854d0e;
}
.status-cancelled .request-status-title {
  color: #991b1b;
}

.request-status-meta {
  font-size: 0.8125rem;
  opacity: 0.8;
}

.request-status-badge {
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Metrics Grid - 2x2 on mobile, 4 on desktop */
.request-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .request-metrics-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

.request-metric-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  display: inline-flex;
  gap: var(--app-space-2);
  align-items: center;
}

.request-metric-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.request-metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.request-metric-icon.icon-items {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.request-metric-icon.icon-value {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.request-metric-icon.icon-brands {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

.request-metric-icon.icon-responses {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.request-metric-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}

.request-metric-label {
  font-size: 0.6875rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
}

/* Info Sections */
.request-info-section {
  background: white;
  border-radius: 16px;
  margin-bottom: 16px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.request-info-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.request-info-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.request-info-icon.icon-client {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.request-info-icon.icon-project {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

.request-info-icon.icon-items {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.request-info-icon.icon-timeline {
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
}

.request-info-icon.icon-settings {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

.request-info-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.request-info-body {
  padding: 16px;
}

/* Info Grid Layout */
.request-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 576px) {
  .request-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.request-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.request-info-label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

.request-info-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1e293b;
}

.request-info-value a {
  color: #2563eb;
  text-decoration: none;
}

.request-info-value a:hover {
  text-decoration: underline;
}

/* Items Breakdown */
.request-items-section {
  background: white;
  border-radius: 16px;
  margin-bottom: 16px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.request-brand-group {
  border-bottom: 1px solid #e2e8f0;
}

.request-brand-group:last-child {
  border-bottom: none;
}

.request-brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.request-brand-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.request-brand-logo {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  background: white;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: #64748b;
  overflow: hidden;
}

.request-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2px;
}

.request-brand-name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #1e293b;
}

.request-brand-count {
  font-size: 0.75rem;
  color: #64748b;
  background: #e2e8f0;
  padding: 2px 10px;
  border-radius: 100px;
}

.request-brand-total {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #16a34a;
}

/* ================================================
   UNIFIED ITEM ROW COMPONENT
   Used in all modal contexts with consistent styling
   Mobile-first responsive design
   ================================================ */

/* Item Row - Mobile First */
.request-item-row,
.brand-item-row,
.read-only-item-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.15s ease;
  background: white;
}

.request-item-row:last-child,
.brand-item-row:last-child,
.read-only-item-row:last-child {
  border-bottom: none;
}

.request-item-row:hover,
.brand-item-row:hover,
.read-only-item-row:hover {
  background: #f8fafc;
  transform: translateX(2px);
}

@media (min-width: 768px) {
  .request-item-row,
  .brand-item-row,
  .read-only-item-row {
    align-items: center;
    padding: 14px 20px;
    gap: 16px;
  }
}

/* Item Image - Unified */
.request-item-image,
.brand-item-image,
.read-only-item-image {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 10px;
  object-fit: cover;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .request-item-image,
  .brand-item-image,
  .read-only-item-image {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 12px;
  }
}

/* Item Placeholder - Unified */
.request-item-placeholder,
.brand-item-placeholder,
.read-only-item-placeholder {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 1.5rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .request-item-placeholder,
  .brand-item-placeholder,
  .read-only-item-placeholder {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 12px;
    font-size: 1.75rem;
  }
}

/* Item Details Container - Unified */
.request-item-details,
.brand-item-details,
.read-only-item-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Item Title - Unified */
.request-item-title,
.brand-item-title,
.read-only-item-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: #1e293b;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .request-item-title,
  .brand-item-title,
  .read-only-item-title {
    font-size: 0.9375rem;
    -webkit-line-clamp: 1;
  }
}

/* Item Description - Unified */
.request-item-desc,
.brand-item-desc,
.read-only-item-desc {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .request-item-desc,
  .brand-item-desc,
  .read-only-item-desc {
    -webkit-line-clamp: 1;
  }
}

/* Item SKU Badge - Unified */
.request-item-sku,
.brand-item-sku,
.read-only-item-sku {
  display: inline-block;
  font-size: 0.6875rem;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono, "SF Mono", Consolas, monospace);
  font-weight: 500;
}

/* Item Pricing Container - Unified */
.request-item-pricing,
.brand-item-pricing,
.read-only-item-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  min-width: 80px;
}

@media (min-width: 768px) {
  .request-item-pricing,
  .brand-item-pricing,
  .read-only-item-pricing {
    min-width: 100px;
  }
}

/* Item Quantity - Unified */
.request-item-qty,
.brand-item-qty,
.read-only-item-qty {
  font-size: 0.75rem;
  color: #64748b;
}

/* Item Price - Unified */
.request-item-price,
.brand-item-price,
.read-only-item-price {
  font-weight: 700;
  font-size: 1rem;
  color: #1e293b;
  font-family: var(--font-mono, "SF Mono", Consolas, monospace);
}

@media (min-width: 768px) {
  .request-item-price,
  .brand-item-price,
  .read-only-item-price {
    font-size: 1.0625rem;
  }
}

/* Mobile Optimization: Stack pricing on mobile */
@media (max-width: 575.98px) {
  .request-item-pricing,
  .brand-item-pricing,
  .read-only-item-pricing {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
  }
}

/* Timeline Section */
.request-timeline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 576px) {
  .request-timeline {
    grid-template-columns: repeat(3, 1fr);
  }
}

.request-timeline-item {
  text-align: center;
  padding: 12px;
  background: #f8fafc;
  border-radius: 10px;
}

.request-timeline-label {
  font-size: 0.6875rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.request-timeline-value {
  font-weight: 600;
  font-size: 0.875rem;
  color: #1e293b;
}

.request-timeline-value.deadline-warning {
  color: #d97706;
}

.request-timeline-value.deadline-danger {
  color: #dc2626;
}

/* Footer Actions */
#requestDetailsModal .modal-enterprise-footer {
  background: white;
  border-top: 1px solid #e2e8f0;
  justify-content: space-between;
}

#requestDetailsModal .modal-enterprise-footer .btn {
  min-height: 44px;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 20px;
}

#requestDetailsModal .modal-enterprise-footer .btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border: none;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

#requestDetailsModal .modal-enterprise-footer .btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

#requestDetailsModal .modal-enterprise-footer .btn-outline-danger {
  border-width: 2px;
}

#requestDetailsModal .modal-enterprise-footer .badge {
  display: flex;
  align-items: center;
}

/* Mobile optimizations */
@media (max-width: 575.98px) {
  .request-status-banner {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }

  .request-status-badge {
    margin-top: 12px;
  }

  .request-item-row {
    flex-wrap: wrap;
  }

  .request-item-pricing {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
  }

  .request-item-qty {
    margin-bottom: 0;
  }

  #requestDetailsModal .modal-enterprise-footer {
    gap: 12px;
  }

  #requestDetailsModal .modal-enterprise-footer .btn {
    width: 100%;
  }

  #requestDetailsModal .modal-enterprise-footer .d-flex {
    width: 100%;
  }

  #requestDetailsModal .modal-enterprise-footer .d-flex .btn {
    width: 100%;
  }

  #requestDetailsModal .modal-enterprise-footer .badge {
    width: 100%;
    justify-content: center;
  }
}

/* Read-Only Item Cards - Mobile Friendly */
.read-only-items-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.read-only-item-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}

.read-only-item-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.read-only-item-main {
  display: flex;
  gap: 14px;
}

.read-only-item-image {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: #f1f5f9;
  flex-shrink: 0;
}

.read-only-item-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.read-only-item-info {
  flex: 1;
  min-width: 0;
}

.read-only-item-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1e293b;
  margin-bottom: 4px;
  line-height: 1.3;
}

.read-only-item-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: #64748b;
  margin-bottom: 8px;
}

.read-only-item-brand img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: contain;
  background: white;
}

.read-only-item-brand i {
  font-size: 0.75rem;
  color: #94a3b8;
}

.read-only-item-qty-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  background: #f1f5f9;
  padding: 3px 10px;
  border-radius: 20px;
}

.read-only-item-pricing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #e2e8f0;
}

.read-only-price-label {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 2px;
}

.read-only-price-value {
  font-weight: 700;
  font-size: 1rem;
  color: #1e293b;
}

.read-only-price-value.final {
  color: #059669;
  font-size: 1.125rem;
}

.read-only-price-discount {
  font-size: 0.75rem;
  color: #059669;
  font-weight: 500;
}

/* Read-Only Item Cards - Desktop Enhancement */
@media (min-width: 768px) {
  .read-only-items-grid {
    gap: 16px;
  }

  .read-only-item-card {
    padding: 20px;
  }

  .read-only-item-image,
  .read-only-item-placeholder {
    width: 80px;
    height: 80px;
  }

  .read-only-item-pricing {
    flex-wrap: nowrap;
  }
}

/* Read-Only Items List (buildReadOnlyView) */
.readonly-items-list {
  background: #fafafa;
  border-radius: 8px;
  padding: 8px;
}

.readonly-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.15s ease;
}

.readonly-item-row:last-child {
  margin-bottom: 0;
}

.readonly-item-row:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.readonly-item-image-container {
  flex-shrink: 0;
}

.readonly-item-image {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f4f6;
  display: block;
}

.readonly-item-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 1.25rem;
}

.readonly-item-info {
  flex: 1;
  min-width: 0;
}

.readonly-item-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: #1f2937;
  margin-bottom: 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.readonly-item-ref {
  font-size: 0.75rem;
  color: #6b7280;
  font-family: var(--font-mono, monospace);
}

.readonly-item-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  flex-shrink: 0;
  min-width: 100px;
}

.readonly-item-qty {
  font-size: 0.75rem;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
}

.readonly-item-qty::before {
  content: "Qty: ";
}

.readonly-item-unit {
  font-size: 0.75rem;
  color: #9ca3af;
}

.readonly-item-total {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #1f2937;
}

/* Mobile adjustments for readonly items */
@media (max-width: 575.98px) {
  .readonly-item-row {
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
  }

  .readonly-item-image,
  .readonly-item-placeholder {
    width: 48px;
    height: 48px;
  }

  .readonly-item-info {
    flex: 1 1 calc(100% - 60px);
  }

  .readonly-item-pricing {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed #e5e7eb;
    align-items: center;
    gap: 8px;
  }

  .readonly-item-qty {
    order: 1;
  }

  .readonly-item-unit {
    order: 2;
    flex: 1;
  }

  .readonly-item-total {
    order: 3;
    font-size: 1rem;
    color: #059669;
  }
}

/* Legacy Modal Classes - Keep for compatibility */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(135deg, #065f46 0%, #047857 100%);
  color: white;
  border: none;
  padding: var(--space-lg);
}

.modal-title {
  font-weight: 600;
  font-size: var(--text-xl);
}

.modal-body {
  padding: var(--space-xl);
}

.modal-footer {
  border-top: 1px solid var(--gray-200);
  padding: var(--space-lg);
}

/* ========================================================================
   UNIFIED BUTTON GRID SYSTEM FOR MODALS
   Auto-responsive layout based on button count
   ======================================================================== */

/* Button grid container */
.modal-footer-btn-grid {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

/* DESKTOP LAYOUT (min-width: 577px) - All buttons in one row */

/* 1 button: Full width */
.modal-footer-btn-grid.btn-count-1 {
  grid-template-columns: 1fr;
}

/* 2 buttons: Two columns (50% each) */
.modal-footer-btn-grid.btn-count-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* 3 buttons: Three columns (equal width) */
.modal-footer-btn-grid.btn-count-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 4 buttons: Four columns (equal width) - all in one row */
.modal-footer-btn-grid.btn-count-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* MOBILE LAYOUT (max-width: 576px) - 2 buttons per row */
@media (max-width: 576px) {
  /* 2 buttons: Stay 2 columns */
  .modal-footer-btn-grid.btn-count-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* 3 buttons: 2 columns (first button spans both, then 2 buttons at 50%) */
  .modal-footer-btn-grid.btn-count-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .modal-footer-btn-grid.btn-count-3 .btn:first-child {
    grid-column: 1 / -1; /* Span both columns */
  }
  
  /* 4 buttons: 2 columns, 2 rows (2x2 grid) */
  .modal-footer-btn-grid.btn-count-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Ensure buttons in grid have consistent height */
.modal-footer-btn-grid .btn {
  min-height: 42px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Icon spacing in buttons */
.modal-footer-btn-grid .btn i {
  margin-right: 0.375rem;
}

.modal-footer-btn-grid .btn i:last-child {
  margin-right: 0;
  margin-left: 0.375rem;
}

.btn-close {
  filter: brightness(0) invert(1);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
}

/* Mobile Modal Fullscreen (Legacy) */
@media (max-width: 767.98px) {
  .stats-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
  }

  .header-stats-actions {
    align-items: start;
  }

  .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100%;
  }
  .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }
  .modal-header {
    padding-top: calc(var(--space-md) + env(safe-area-inset-top));
    border-radius: 0 !important;
  }
  .modal-footer {
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  }
  .main-container {
    padding: var(--space-xs);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }
  .header-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* ================================================
   15. ALERTS
   ================================================ */
.alert {
  border-radius: var(--radius-md);
  border: none;
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid;
}

.alert-info {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: var(--info);
  color: var(--info-dark);
}

.alert-success {
  background: rgba(34, 197, 94, 0.1);
  border-left-color: var(--success);
  color: var(--success-dark);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-left-color: var(--warning);
  color: var(--warning-dark);
}

.alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border-left-color: var(--danger);
  color: var(--danger-dark);
}

/* ================================================
   16. LOADING STATES
   ================================================ */
.loading-spinner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  gap: var(--space-md);
}

.loading-spinner .spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.3rem;
  color: var(--reseller-primary);
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-200) 25%,
    var(--gray-100) 50%,
    var(--gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
}
.skeleton-title {
  height: 1.5rem;
  width: 60%;
  margin-bottom: 1rem;
}
.skeleton-card {
  height: 120px;
  border-radius: var(--radius-lg);
}

/* ================================================
   17. EMPTY STATES
   ================================================ */
.empty-state {
  text-align: center;
  padding: var(--space-2xl);
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  background: var(--gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  font-size: 2rem;
  color: var(--gray-400);
}

.empty-state-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.empty-state-description {
  color: var(--gray-500);
  margin-bottom: var(--space-lg);
}

/* ================================================
   18. BREADCRUMB
   ================================================ */
.breadcrumb-nav {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: var(--space-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.breadcrumb-nav .breadcrumb {
  margin: 0;
  font-weight: 500;
  font-size: var(--text-sm);
}

.breadcrumb-nav .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
}

.breadcrumb-nav .breadcrumb-item a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.15);
}

.breadcrumb-nav .breadcrumb-item.active {
  color: white;
  font-weight: 600;
}

/* ================================================
   19. UTILITY CLASSES
   ================================================ */
.dashboard-section-title {
  font-size: var(--text-lg);
  max-width: 1200px;
  margin: var(--space-md) auto;
  padding: 0 var(--space-md);
}

@media (min-width: 768px) {
  .dashboard-section-title {
    font-size: var(--text-xl);
    padding: 0;
  }
}

/* Price Display */
.price-cell {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}

.savings-positive {
  color: var(--success) !important;
}
.savings-negative {
  color: var(--danger) !important;
}

/* Brand Badge */
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--purple);
}

.brand-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
}

/* Item Image */
.item-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
}

/* Touch-Friendly Utilities */
.touch-target {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

/* ================================================
   20. COMPONENT-SPECIFIC STYLES
   ================================================ */

/* ================================================
   Dashboard Quick Actions - Enterprise Grid
   ================================================ */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

@media (min-width: 576px) {
  .quick-actions-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
}

.quick-action-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--gray-700);
  transition: all var(--transition-base);
  min-height: 100px;
  cursor: pointer;
  gap: var(--space-md);
}

@media (min-width: 576px) {
  .quick-action-card {
    padding: var(--space-lg);
    min-height: 120px;
  }
}

.quick-action-card:hover {
  background: white;
  border-color: var(--reseller-primary);
  color: var(--gray-900);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.quick-action-card:active {
  transform: scale(0.98);
}

.quick-action-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  font-size: 1.25rem;
  transition: transform var(--transition-fast);
}

@media (min-width: 576px) {
  .quick-action-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
  }
}

.quick-action-card:hover .quick-action-icon {
  transform: scale(1.1);
}

.quick-action-icon.icon-warning {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.quick-action-icon.icon-success {
  background: var(--success-light);
  color: var(--success-dark);
}

.quick-action-icon.icon-info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

.quick-action-icon.icon-primary {
  background: rgba(139, 92, 246, 0.1);
  color: var(--purple);
}

.quick-action-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  line-height: var(--leading-tight);
}

@media (min-width: 576px) {
  .quick-action-label {
    font-size: var(--text-sm);
  }
}

/* Legacy Quick Action Button Support */
.quick-action-btn {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}

.quick-action-btn:hover {
  transform: translateY(-2px);
}

.quick-action-btn i {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--reseller-primary), var(--purple));
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-lg);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--reseller-primary);
}

.timeline-item.completed::before {
  background: var(--success);
  border-color: var(--success);
}

/* Quote Card (Manufacturer Quotes) */
.quote-card {
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
  border-left: 4px solid var(--gray-300);
}

.quote-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.quote-card-pending {
  border-left-color: var(--warning);
}
.quote-card-quoted {
  border-left-color: var(--success);
}
.quote-card-accepted {
  border-left-color: var(--info);
}
.quote-card-rejected {
  border-left-color: var(--danger);
}
.quote-card-expired {
  border-left-color: var(--gray-400);
  opacity: 0.7;
}

/* Manufacturer Info */
.manufacturer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--reseller-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.25rem;
}

/* Urgency Levels */
.urgency-urgent {
  background: #fee2e2;
  color: #991b1b;
}
.urgency-high {
  background: #fef3c7;
  color: #92400e;
}
.urgency-normal {
  background: #dbeafe;
  color: #1e40af;
}
.urgency-low {
  background: #f0f9ff;
  color: #0369a1;
}

/* Chart Containers */
.section-card-body canvas {
  max-height: 300px !important;
}

/* Client Avatar */
.client-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--info), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* Breakdown Stats (Analytics) */
.breakdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
}

.breakdown-item:hover {
  background: var(--gray-100);
  transform: translateX(4px);
}

.breakdown-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 1.25rem;
}

.breakdown-icon-primary {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}
.breakdown-icon-success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}
.breakdown-icon-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}
.breakdown-icon-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.breakdown-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
}

.breakdown-label {
  font-size: var(--text-sm);
  color: var(--gray-500);
}

/* ================================================
   21. LIST VIEW (Offers Pattern)
   ================================================ */
.list-container {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.list-header {
  display: none;
  background: var(--gray-50);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 2px solid var(--gray-200);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-600);
}

@media (min-width: 992px) {
  .list-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 120px;
    gap: var(--space-md);
    align-items: center;
  }
}

.list-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--gray-100);
  transition: var(--transition-base);
  cursor: pointer;
}

.list-item:hover {
  background: rgba(245, 158, 11, 0.03);
}

.list-item:last-child {
  border-bottom: none;
}

@media (min-width: 992px) {
  .list-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 120px;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md) var(--space-lg);
  }
}

/* List Item Columns */
.list-col-main {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.list-col-main .item-number {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--reseller-primary);
  font-size: var(--text-sm);
}

.list-col-main .item-title {
  font-weight: 500;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-col-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--gray-900);
}

.list-col-actions {
  display: flex;
  gap: var(--space-xs);
  justify-content: flex-end;
}

.list-col-actions .btn {
  padding: 6px 12px;
  font-size: var(--text-xs);
}

/* Mobile List Labels */
.list-mobile-label {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  min-width: 80px;
}

@media (min-width: 992px) {
  .list-mobile-label {
    display: none;
  }
}

/* ================================================
   22. ACCORDION GROUPS (Project Grouping)
   ================================================ */
.group-container {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-md);
}

.group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(to right, var(--gray-50), white);
  border-bottom: 1px solid var(--gray-200);
  cursor: pointer;
  transition: var(--transition-base);
}

.group-header:hover {
  background: linear-gradient(to right, var(--gray-100), var(--gray-50));
}

.group-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.group-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--reseller-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
}

.group-info h6 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-900);
}

.group-info small {
  color: var(--gray-500);
  font-size: var(--text-xs);
}

.group-stats {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.group-stat {
  text-align: center;
}

.group-stat-value {
  font-size: var(--text-lg);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--gray-900);
}

.group-stat-label {
  font-size: var(--text-xs);
  color: var(--gray-500);
  text-transform: uppercase;
}

.group-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  color: var(--gray-600);
  transition: var(--transition-base);
}

.group-header:hover .group-toggle {
  background: var(--reseller-primary);
  color: white;
}

.group-toggle i {
  transition: transform 0.3s ease;
}

.group-header.collapsed .group-toggle i {
  transform: rotate(-90deg);
}

.group-body {
  padding: 0;
}

/* ================================================
   23. REQUEST/PROPOSAL CARDS (Enhanced)
   ================================================ */
.request-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  position: relative;
}

.request-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--reseller-gradient);
}

.request-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.request-card-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: var(--space-md);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.request-card-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.request-number {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--reseller-primary);
  letter-spacing: 0.05em;
}

.request-title {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

.request-card-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.request-card-body {
  padding: var(--space-md);
}

/* Request Metrics Grid (2x2) */
.request-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.request-metric {
  padding: var(--space-sm) var(--space-md);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gray-300);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.request-metric-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.request-metric-content {
  flex: 1;
  min-width: 0;
}

.request-metric-label {
  font-size: var(--text-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.request-metric-value {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--gray-900);
  font-family: var(--font-mono);
}

/* Metric Variants */
.request-metric-items {
  border-left-color: var(--info);
}
.request-metric-items .request-metric-icon {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

.request-metric-value-card {
  border-left-color: var(--success);
}
.request-metric-value-card .request-metric-icon {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.request-metric-deadline {
  border-left-color: var(--warning);
}
.request-metric-deadline .request-metric-icon {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.request-metric-responses {
  border-left-color: var(--purple);
}
.request-metric-responses .request-metric-icon {
  background: rgba(139, 92, 246, 0.1);
  color: var(--purple);
}

.request-card-footer {
  padding: var(--space-md);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.request-footer-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--gray-500);
}

.request-footer-actions {
  display: flex;
  gap: var(--space-sm);
}

/* ================================================
   24. FILTER PILLS (Horizontal Scroll - Mobile-First)
   ================================================ */
.filter-pills {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  padding: var(--space-xs) var(--space-sm);
  margin: 0 calc(-1 * var(--space-sm));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

@media (min-width: 768px) {
  .filter-pills {
    padding: var(--space-xs) 0;
    margin: 0;
  }
}

.filter-pills::-webkit-scrollbar {
  display: none;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--gray-600);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-base);
  min-height: 36px;
}

@media (min-width: 768px) {
  .filter-pill {
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--text-sm);
    min-height: var(--touch-target-min);
  }
}

.filter-pill:hover {
  border-color: var(--reseller-primary);
  color: var(--reseller-primary);
}

.filter-pill:active {
  transform: scale(0.97);
}

.filter-pill.active {
  background: var(--reseller-gradient);
  border-color: var(--reseller-primary);
  color: white;
}

.filter-pill .badge {
  background: rgba(0, 0, 0, 0.1);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 0.625rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .filter-pill .badge {
    padding: 2px 8px;
    font-size: var(--text-xs);
  }
}

.filter-pill.active .badge {
  background: rgba(255, 255, 255, 0.3);
}

/* ================================================
   25. VIEW TOGGLE (Grid/List Switch - Mobile-First)
   ================================================ */
.view-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .view-controls {
    gap: var(--space-md);
  }
}

.view-toggle-group {
  display: flex;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 2px;
}

@media (min-width: 768px) {
  .view-toggle-group {
    padding: 4px;
  }
}

.view-toggle-btn {
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .view-toggle-btn {
    padding: 8px 12px;
    font-size: 1rem;
  }
}

.view-toggle-btn:hover {
  color: var(--gray-700);
}

.view-toggle-btn:active {
  transform: scale(0.95);
}

.view-toggle-btn.active {
  background: white;
  color: var(--reseller-primary);
  box-shadow: var(--shadow-sm);
}

/* ================================================
   26. CARDS GRID (Responsive - Mobile-First)
   ================================================ */
.cards-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm);
}

@media (min-width: 576px) {
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: var(--space-md);
  }
}

@media (min-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: var(--space-lg);
  }
}

/* Cards View Container */
#cards-view-container {
  display: none;
}

#cards-view-container.active {
  display: block;
}

/* Table View Container */
#table-view-container {
  display: block;
}

#table-view-container.hidden {
  display: none;
}

/* List View Container */
#list-view-container {
  display: none;
}

#list-view-container.active {
  display: block;
}

/* ================================================
   27. MOBILE UTILITIES
   ================================================ */

/* Hide on mobile, show on tablet+ */
.d-mobile-none {
  display: none !important;
}

@media (min-width: 768px) {
  .d-mobile-none {
    display: block !important;
  }

  .d-mobile-flex-none {
    display: flex !important;
  }
}

/* Show only on mobile */
.d-mobile-only {
  display: block !important;
}

@media (min-width: 768px) {
  .d-mobile-only {
    display: none !important;
  }
}

/* Full width on mobile */
.w-mobile-full {
  width: 100%;
}

@media (min-width: 768px) {
  .w-mobile-full {
    width: auto;
  }
}

/* Touch-safe spacing */
.gap-mobile-sm {
  gap: var(--space-xs);
}

@media (min-width: 768px) {
  .gap-mobile-sm {
    gap: var(--space-sm);
  }
}

/* Safe area padding for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .safe-area-bottom {
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  }
}

/* ================================================
   28. DASHBOARD CLEAN MODERN LIST CARDS
   (Matching Projects Module Style)
   ================================================ */

/* Dashboard List Container */
.dashboard-list {
  display: flex;
  flex-direction: column;
}

/* Dashboard Empty State */
.dashboard-empty-state {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--gray-500);
}

.dashboard-empty-state i {
  font-size: 3rem;
  color: var(--gray-300);
  margin-bottom: var(--space-md);
  display: block;
}

.dashboard-empty-state h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-xs);
}

.dashboard-empty-state p {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin: 0;
}

/* Dashboard List Item - Clean Modern Card */
.dashboard-list-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.15s ease;
}

.dashboard-list-item:last-child {
  border-bottom: none;
}

.dashboard-list-item:hover {
  background: var(--gray-50);
}

/* List Item Header */
.dashboard-list-item .list-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.dashboard-list-item .item-identity {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  min-width: 0;
  flex: 1;
}

/* Item Icon - Gradient Style */
.dashboard-list-item .item-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.dashboard-list-item .item-icon-warning {
  background: var(--reseller-gradient);
  color: white;
}

.dashboard-list-item .item-icon-primary {
  background: var(--reseller-gradient);
  color: white;
}

.dashboard-list-item .item-icon-success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
}

/* Item Title */
.dashboard-list-item .item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0 0 0.375rem 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status Badges - Clean Pill Style */
.dashboard-list-item .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 100px;
  text-transform: capitalize;
}

.dashboard-list-item .status-badge i {
  font-size: 0.625rem;
}

/* Status Badge Colors */
.dashboard-list-item .status-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.dashboard-list-item .status-overdue {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.dashboard-list-item .status-draft {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.dashboard-list-item .status-submitted {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.dashboard-list-item .status-won {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.dashboard-list-item .status-rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.dashboard-list-item .status-expired {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

/* Item Value */
.dashboard-list-item .item-value {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-800);
  white-space: nowrap;
}

/* List Item Meta */
.dashboard-list-item .list-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.dashboard-list-item .meta-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.dashboard-list-item .meta-item i {
  font-size: 0.875rem;
}

.dashboard-list-item .meta-item.meta-discount {
  color: var(--success);
  font-weight: 500;
}

.dashboard-list-item .meta-item.meta-location {
  color: var(--gray-600);
}

/* List Item Footer */
.dashboard-list-item .list-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--gray-100);
}

.dashboard-list-item .item-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.dashboard-list-item .item-date i {
  color: var(--gray-400);
}

.dashboard-list-item .item-actions {
  display: flex;
  gap: 0.375rem;
}

.dashboard-list-item .item-actions .btn {
  padding: 0.375rem 0.625rem;
  background: var(--reseller-light);
}

/* Desktop Row Layout for Dashboard List Items */
.dashboard-list-item .list-item-mobile {
  display: block;
}

.dashboard-list-item .list-item-desktop {
  display: none;
}

@media (min-width: 768px) {
  .dashboard-list-item .list-item-mobile {
    display: none;
  }

  .dashboard-list-item .list-item-desktop {
    display: grid;
    grid-template-columns: minmax(200px, 2fr) 100px minmax(120px, 1fr) 90px 100px 80px;
    align-items: center;
    gap: var(--space-md);
  }

  .dashboard-list-item {
    padding: var(--space-sm) var(--space-md);
    transition: background-color 0.15s ease;
  }

  .dashboard-list-item:hover {
    background: var(--gray-50);
  }

  /* Desktop columns */
  .list-col {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .list-col-project {
    gap: var(--space-sm);
  }

  .list-col-project .col-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
  }

  .list-col-project .col-icon.request-icon {
    background: var(--reseller-primary);
    color: white;
  }

  .list-col-project .col-icon.proposition-icon {
    background: var(--reseller-primary);
    color: white;
  }

  .list-col-project .col-info {
    min-width: 0;
    flex: 1;
  }

  .list-col-project .col-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
  }

  .list-col-project .col-subtitle {
    font-size: 0.75rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .list-col-status {
    justify-content: flex-start;
  }

  .list-col-status .status-badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
  }

  .list-col-brands {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--gray-600);
  }

  .list-col-brands .brand-count {
    font-weight: 500;
  }

  .list-col-brands .discount-value {
    font-weight: 600;
    color: var(--success);
    font-size: 0.875rem;
  }

  .list-col-value {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-900);
  }

  .list-col-deadline {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .list-col-deadline .deadline-date {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-700);
    border: 0.5px solid var(--gray-200);
  }

  .list-col-deadline .deadline-time {
    font-size: 0.6875rem;
    color: var(--gray-500);
  }

  .list-col-deadline.urgent .deadline-date {
    color: var(--danger);
  }

  .list-col-actions {
    justify-content: flex-end;
  }

  .list-col-actions .btn-sm {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    background: var(--reseller-light);
  }
}

/* Desktop table header for list containers */
.dashboard-list-header {
  display: none;
}

@media (min-width: 768px) {
  .dashboard-list-header {
    display: grid;
    grid-template-columns: minmax(200px, 2fr) 100px minmax(120px, 1fr) 90px 100px 80px;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .dashboard-list-header span {
    display: block;
  }

  .dashboard-list-header .header-actions {
    text-align: right;
  }
}

/* ================================================
   29. PRINT STYLES
   ================================================ */
@media print {
  .page-header {
    background: white !important;
    color: black !important;
  }
  .btn,
  .header-actions,
  .filter-bar {
    display: none !important;
  }
  .section-card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ================================================
   30. DASHBOARD ENHANCED SECTIONS (v5.2)
   Conversion Trends, Top Brands, Deadlines, Orders
   ================================================ */

/* Trend Cards - Week over Week */
.trend-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--gray-50);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.trend-card:hover {
  background: var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.trend-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.trend-content {
  flex: 1;
  min-width: 0;
}

.trend-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.trend-label {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: 2px;
}

.trend-change {
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--gray-100);
  color: var(--gray-500);
}

.trend-change.positive {
  background: var(--success-light);
  color: var(--success-dark);
}

.trend-change.negative {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger-dark);
}

/* Brand List Items */
.brand-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.2s ease;
}

.brand-list-item:hover {
  background: var(--gray-50);
}

.brand-list-item:last-child {
  border-bottom: none;
}

.brand-rank {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.brand-rank.rank-1 {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: white;
}

.brand-rank.rank-2 {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
  color: white;
}

.brand-rank.rank-3 {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
  color: white;
}

.brand-rank.rank-other {
  background: var(--gray-100);
  color: var(--gray-600);
}

.brand-info {
  flex: 1;
  min-width: 0;
}

.brand-name {
  font-weight: 600;
  color: var(--gray-900);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-stats {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: 2px;
}

.brand-revenue {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--success-dark);
  white-space: nowrap;
}

/* Deadline List Items */
.deadline-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.2s ease;
}

.deadline-item:hover {
  background: var(--gray-50);
}

.deadline-item:last-child {
  border-bottom: none;
}

.deadline-urgency {
  width: 8px;
  height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
}

.deadline-urgency.urgent {
  background: linear-gradient(
    180deg,
    var(--danger) 0%,
    var(--danger-dark) 100%
  );
  animation: pulse-urgency 2s infinite;
}

.deadline-urgency.high {
  background: linear-gradient(
    180deg,
    var(--warning) 0%,
    var(--warning-dark) 100%
  );
}

.deadline-urgency.normal {
  background: linear-gradient(180deg, var(--info) 0%, var(--info-dark) 100%);
}

@keyframes pulse-urgency {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.deadline-info {
  flex: 1;
  min-width: 0;
}

.deadline-title {
  font-weight: 600;
  color: var(--gray-900);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deadline-meta {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.deadline-date {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.deadline-date.urgent {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger-dark);
}

.deadline-date.high {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.deadline-date.normal {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info-dark);
}

/* Order List Items */
.order-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.2s ease;
}

.order-list-item:hover {
  background: var(--gray-50);
}

.order-list-item:last-child {
  border-bottom: none;
}

.order-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--success-light);
  color: var(--success-dark);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.order-info {
  flex: 1;
  min-width: 0;
}

.order-title {
  font-weight: 600;
  color: var(--gray-900);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-meta {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: 2px;
}

.order-value {
  text-align: right;
}

.order-amount {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--success-dark);
}

.order-discount {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: 2px;
}

/* Client Stats Cards */
.client-stat-card {
  text-align: center;
  padding: var(--space-md);
  background: var(--gray-50);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.client-stat-card:hover {
  background: var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.client-stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.client-stat-label {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Empty State for New Sections */
.section-empty-state {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--gray-500);
}

.section-empty-state i {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
  opacity: 0.5;
}

.section-empty-state p {
  margin: 0;
  font-size: var(--text-sm);
}

/* Responsive: Mobile adjustments */
@media (max-width: 767.98px) {
  .trend-card {
    flex-direction: column;
    text-align: center;
    padding: var(--space-sm);
  }

  .trend-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .trend-value {
    font-size: var(--text-lg);
  }

  .brand-list-item,
  .deadline-item,
  .order-list-item {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .brand-revenue,
  .order-value {
    width: 100%;
    text-align: left;
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px dashed var(--gray-200);
  }

  .client-stat-card {
    padding: var(--space-sm);
  }

  .client-stat-value {
    font-size: var(--text-xl);
  }
}

/* ============================================================
   ENTERPRISE REQUEST CARDS - Matching Project Detail Design
   ============================================================ */

/* Staggered Animation for Cards */
@keyframes slideInCard {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.request-card-mobile {
  animation: slideInCard 0.4s ease forwards;
  opacity: 0;
}

.request-card-mobile:nth-child(1) {
  animation-delay: 0.05s;
}
.request-card-mobile:nth-child(2) {
  animation-delay: 0.1s;
}
.request-card-mobile:nth-child(3) {
  animation-delay: 0.15s;
}
.request-card-mobile:nth-child(4) {
  animation-delay: 0.2s;
}
.request-card-mobile:nth-child(5) {
  animation-delay: 0.25s;
}
.request-card-mobile:nth-child(6) {
  animation-delay: 0.3s;
}

/* Main Card Container - Enterprise Style */
.request-card-mobile {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.25s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.request-card-mobile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #10b981, #059669, #047857);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.request-card-mobile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.15);
  border-color: #10b981;
}

.request-card-mobile:hover::before {
  opacity: 1;
}

/* Urgent/Overdue Modifiers */
.request-card-overdue,
.request-card-urgent {
  border-left: 4px solid var(--danger);
}

.request-card-overdue::before,
.request-card-urgent::before {
  background: linear-gradient(90deg, #ef4444, #dc2626, #b91c1c);
  opacity: 1;
}

.request-card-warning {
  border-left: 4px solid var(--warning);
}

.request-card-warning::before {
  background: linear-gradient(90deg, #f59e0b, #d97706, #b45309);
}

/* Card Header - Dark Theme (Enterprise Style) */
.request-card-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.request-card-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 10% 30%,
      rgba(16, 185, 129, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 90% 70%,
      rgba(5, 150, 105, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
}

/* Remove old bg div - header uses ::before now */
.request-card-header-bg {
  display: none;
}

.request-card-header-content {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
}

.request-card-id-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.request-card-id-badge .request-id {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.75rem;
  font-weight: 600;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.2);
  padding: 0.3rem 0.625rem;
  border-radius: 6px;
  white-space: nowrap;
}

.request-card-id-badge .overdue-indicator {
  color: #fca5a5;
  animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Status Pill - Enterprise Style */
.request-status-pill {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  position: relative;
  z-index: 2;
}

.status-badge-pending {
  background: rgba(245, 158, 11, 0.8);
  color: white;
}

.status-badge-active {
  background: rgba(16, 185, 129, 0.8);
  color: white;
}

.status-badge-submitted,
.status-badge-responded {
  background: rgba(59, 130, 246, 0.8);
  color: white;
}

.status-badge-selected {
  background: rgba(5, 150, 105, 0.8);
  color: white;
}

.status-badge-rejected {
  background: rgba(220, 38, 38, 0.8);
  color: white;
}

.status-badge-expired,
.status-badge-overdue {
  background: rgba(220, 38, 38, 0.8);
  color: white;
}

/* Client Info Section - Enterprise Style */
.request-card-client {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: white;
  border-bottom: 1px solid var(--gray-100);
}

.client-avatar-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
}

.request-card-mobile:hover .client-avatar-badge {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.request-card-client .client-info {
  flex: 1;
  min-width: 0;
}

.request-card-client .client-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.request-card-client .project-name {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0.15rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metrics Grid - Enterprise Style */
.request-card-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: white;
}

.metric-cell {
  display: flex;
  flex-direction: column;
  padding: 0.625rem 0.75rem;
  background: var(--gray-50);
  border-radius: 8px;
  border-left: 3px solid var(--gray-300);
  transition: all 0.2s ease;
}

.request-card-mobile:hover .metric-cell {
  background: var(--gray-100);
}

.metric-cell.metric-value-cell {
  border-left-color: #10b981;
}
.metric-cell.metric-items-cell {
  border-left-color: #6366f1;
}
.metric-cell.metric-deadline-cell {
  border-left-color: #f59e0b;
}
.metric-cell.metric-brand-cell {
  border-left-color: #0ea5e9;
}

.metric-cell.metric-overdue {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.metric-cell.metric-warning {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}

/* Hide icon wrapper - use simpler layout */
.metric-icon-wrapper {
  display: none;
}

.metric-data {
  display: flex;
  flex-direction: column;
}

.metric-cell .metric-number {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.metric-cell .metric-number.text-danger {
  color: #ef4444;
}

.metric-cell .metric-number.text-success {
  color: #10b981;
}

.metric-cell .metric-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-top: 2px;
}

/* Brand Tag - Enterprise Style */
.request-card-brand-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--gray-50);
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  border-top: 1px solid var(--gray-100);
}

.request-card-brand-tag i {
  font-size: 0.875rem;
  color: #94a3b8;
}

/* Card Footer - Enterprise Style */
.request-card-footer {
  padding: 0.875rem 1.25rem;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.request-card-timestamp {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: #64748b;
}

.request-card-timestamp i {
  font-size: 0.75rem;
}

.request-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.request-card-actions .btn {
  padding: 0.5rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 8px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.2s ease;
}

.request-card-actions .btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: white;
}

.request-card-actions .btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.request-card-actions .btn-outline-danger {
  background: transparent;
  color: #ef4444;
  border: 1px solid #fca5a5;
}

.request-card-actions .btn-outline-danger:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
}

.btn-icon-sm {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--gray-200);
  color: #64748b;
  transition: all 0.2s ease;
}

.btn-icon-sm:hover {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-color: #6366f1;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Cards Container Grid */
.requests-cards-container,
.requests-accordion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .requests-cards-container,
  .requests-accordion-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.25rem;
    padding: 0;
  }
}

/* Desktop: 3 columns */
@media (min-width: 1200px) {
  .requests-cards-container,
  .requests-accordion-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
  }
}

/* Mobile optimizations */
@media (max-width: 575.98px) {
  .request-card-header {
    padding: 0.875rem 1rem;
  }

  .request-card-id-badge .request-id {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
  }

  .request-status-pill {
    font-size: 0.5625rem;
    padding: 0.25rem 0.625rem;
  }

  .client-avatar-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 0.75rem;
  }

  .request-card-client {
    padding: 0.875rem 1rem;
  }

  .request-card-client .client-name {
    font-size: 0.875rem;
  }

  .request-card-metrics {
    padding: 0.875rem 1rem;
    gap: 0.5rem;
  }

  .metric-cell {
    padding: 0.5rem 0.625rem;
  }

  .metric-cell .metric-number {
    font-size: 0.875rem;
  }

  .request-card-brand-tag {
    padding: 0.5rem 1rem;
  }

  .request-card-footer {
    padding: 0.75rem 1rem;
    flex-direction: column;
    gap: 0.75rem;
  }

  .request-card-timestamp {
    width: 100%;
    justify-content: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
  }

  .request-card-actions {
    width: 100%;
    justify-content: center;
  }

  .request-card-actions .btn {
    flex: 1;
    justify-content: center;
    min-height: 40px;
  }

  .btn-icon-sm {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
}

/* Extra small screens - single column metrics */
@media (max-width: 359.98px) {
  .request-card-metrics {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
}

/* View Toggle Button Active State */
.view-toggle .btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.view-toggle .btn:not(.active) {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-secondary);
}

.view-toggle .btn:not(.active):hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* Project Group Accordion Styles */
.project-group {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-md);
  background: var(--surface-card);
}

.project-group .accordion-header-wrapper {
  display: flex;
  align-items: stretch;
  background: var(--surface-subtle);
}

.project-group .accordion-button {
  flex: 1;
  background: transparent;
  border: none;
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-align: left;
}

.project-group .accordion-button:not(.collapsed) {
  background: var(--surface-card);
  box-shadow: none;
}

.project-group .accordion-button::after {
  margin-left: auto;
}

.project-header-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
}

.project-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--primary-dark) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
  flex-shrink: 0;
}

.project-info .project-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.project-info .project-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.project-info .project-count {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.project-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: var(--space-sm) var(--space-md);
  background: var(--primary);
  color: white;
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 600;
  transition: background 0.2s ease;
}

.project-link-btn:hover {
  background: var(--primary-dark);
  color: white;
}

.project-link-btn .btn-text {
  display: none;
}

@media (min-width: 768px) {
  .project-link-btn .btn-text {
    display: inline;
  }
}

.project-group .accordion-body {
  padding: var(--space-xs);
  background: var(--surface-subtle);
}

/* ==========================================================================
   Request Cards - Matching Offers Card Style
   ========================================================================== */

/* CSS Variables for Request Cards */

/* Cards Container */
.requests-cards-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .requests-cards-container {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 1200px) {
  .requests-cards-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Base Request Card */
.request-card {
  background: white;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  height: 100%;
}

.request-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--requests-gradient);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.request-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--requests-primary);
}

.request-card:hover::before {
  opacity: 1;
}

/* Card Header - Orange Gradient */
.request-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
  background: var(--requests-gradient);
  gap: 0.75rem;
}

.request-header-content {
  flex: 1;
  min-width: 0;
  flex-direction: row;
  display: flex;
  gap: 0.75rem;
}

.request-number {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  color: #1e293b;
  background: rgba(255, 255, 255, 0.95);
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.request-card-header .request-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: white;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.request-card-header .request-subtitle {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0.25rem 0 0;
}

/* Status Badge in Header */
.request-card-header .status-badge {
  flex-shrink: 0;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.status-badge-pending {
  background: rgba(255, 255, 255, 0.95);
  color: #64748b;
}
.status-badge-active {
  background: rgba(34, 197, 94, 0.95);
  color: #ffffff;
}
.status-badge-draft {
  background: rgba(107, 114, 128, 0.95);
  color: #ffffff;
}
.status-badge-submitted {
  background: rgba(59, 130, 246, 0.95);
  color: #ffffff;
}
.status-badge-responded {
  background: rgba(139, 92, 246, 0.95);
  color: #ffffff;
}
.status-badge-selected {
  background: rgba(34, 197, 94, 0.95);
  color: #ffffff;
}
.status-badge-accepted {
  background: rgba(34, 197, 94, 0.95);
  color: #ffffff;
}
.status-badge-rejected {
  background: rgba(239, 68, 68, 0.95);
  color: #ffffff;
}
.status-badge-expired {
  background: rgba(107, 114, 128, 0.95);
  color: #ffffff;
}
.status-badge-cancelled {
  background: rgba(107, 114, 128, 0.95);
  color: #ffffff;
}
.status-badge-overdue {
  background: rgba(239, 68, 68, 0.95);
  color: #ffffff;
}

/* Card Body */
.request-card-body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Metrics Grid - 2x2 */
.request-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.request-card .metric-item {
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-100, #f3f4f6);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

.request-card .metric-item:hover {
  border-color: var(--gray-200, #e5e7eb);
  background: white;
  transform: translateY(-1px);
}

.request-card .metric-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.request-card .metric-content {
  flex: 1;
  min-width: 0;
}

.request-card .metric-value {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900, #111827);
  line-height: 1.2;
}

.request-card .metric-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500, #6b7280);
}

/* Metric Color Variants */
.request-card .metric-item.metric-items {
  border-left-color: #6366f1;
}
.request-card .metric-item.metric-items .metric-icon {
  background: #eef2ff;
  color: #6366f1;
}

.request-card .metric-item.metric-value-card {
  border-left-color: #22c55e;
}
.request-card .metric-item.metric-value-card .metric-icon {
  background: #dcfce7;
  color: #22c55e;
}

.request-card .metric-item.metric-propositions {
  border-left-color: #f59e0b;
}
.request-card .metric-item.metric-propositions .metric-icon {
  background: #fef3c7;
  color: #f59e0b;
}

.request-card .metric-item.metric-responses {
  border-left-color: #8b5cf6;
}
.request-card .metric-item.metric-responses .metric-icon {
  background: #ede9fe;
  color: #8b5cf6;
}

.request-card .metric-item.metric-overdue {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}
.request-card .metric-item.metric-overdue .metric-icon {
  background: #fee2e2;
  color: #ef4444;
}

/* Card Footer */
.request-card-footer {
  background: var(--gray-50, #f9fafb);
  border-top: 1px solid var(--gray-100, #f3f4f6);
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.request-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.request-date {
  font-size: 0.6875rem;
  color: var(--gray-500, #6b7280);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.request-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* View Button - Orange like Offers */
.btn-request-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--requests-dark);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-request-view:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-request-view:active {
  transform: scale(0.97);
}

/* Action Buttons in Card */
.request-actions .btn {
  padding: 0.5rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 8px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.15s ease;
}

.request-actions .btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: white;
}

.request-actions .btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.request-actions .btn-outline-danger {
  background: transparent;
  color: #ef4444;
  border: 1px solid #fca5a5;
}

.request-actions .btn-outline-danger:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
}

/* Mobile Responsive */
@media (max-width: 575.98px) {
  .request-card-header {
    padding: 0.875rem;
  }

  .request-number {
    font-size: 0.625rem;
    padding: 2px 8px;
  }

  .request-card-header .request-title {
    font-size: 0.875rem;
  }

  .status-badge {
    font-size: 0.5625rem;
    padding: 4px 10px;
  }

  .request-card-body {
    padding: 0.875rem;
  }

  .request-metrics {
    gap: 8px;
  }

  .request-card .metric-item {
    padding: 8px;
    gap: 8px;
  }

  .request-card .metric-icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .request-card .metric-value {
    font-size: 0.875rem;
  }

  .request-card-footer {
    padding: 0.75rem 0.875rem;
    flex-direction: column;
    gap: 0.625rem;
  }

  .request-meta {
    width: 100%;
    justify-content: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
  }

  .request-actions {
    width: 100%;
    justify-content: center;
  }

  .request-actions .btn,
  .btn-request-view {
    flex: 1;
    justify-content: center;
    min-height: 40px;
  }
}

/* Extra small screens - single column metrics */
@media (max-width: 359.98px) {
  .request-metrics {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ==========================================================================
   LIST VIEW - Enterprise Table-Style Layout (Matching Offers)
   ========================================================================== */

.requests-list-container {
  background: white;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.requests-list-header {
  display: none;
  align-items: center;
  padding: 12px 16px;
  background: var(--gray-50, #f9fafb);
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500, #6b7280);
}

/* Show header on large screens */
@media (min-width: 992px) {
  .requests-list-header {
    display: flex;
  }

  .requests-list-header .list-col {
    display: flex;
    align-items: center;
  }
}

.requests-list-header .list-col {
  padding: 0 8px;
}

.requests-list-body {
  display: flex;
  flex-direction: column;
}

.request-list-item {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  transition: all 0.15s ease;
  gap: 12px;
}

.request-list-item:last-child {
  border-bottom: none;
}

.request-list-item:hover {
  background: rgba(245, 158, 11, 0.02);
}

.request-list-item:focus-visible {
  outline: 2px solid var(--requests-primary);
  outline-offset: -2px;
}

/* List columns */
.list-col {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.list-col-request {
  flex: 2;
  min-width: 220px;
  max-width: 220px;
}
.list-col-brand {
  flex: 1;
  min-width: 220px;
  max-width: 220px;
}
.list-col-status {
  flex: 0 0 auto;
  min-width: 100px;
  max-width: 100px;
}
.list-col-value {
  flex: 0 0 100px;
  min-width: 100px;
  max-width: 100px;
}
.list-col-deadline {
  flex: 0 0 120px;
  align-items: flex-start;
  min-width: 100px;
  max-width: 100px;
}
.list-col-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 8px;
}

/* Request info in list */
.request-list-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.request-id-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  color: var(--requests-primary);
  background: rgba(245, 158, 11, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

.request-list-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.request-list-subtitle {
  font-size: 0.75rem;
  color: var(--gray-500, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brand avatar in list */
.brand-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
}

.brand-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brand-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-email {
  font-size: 0.6875rem;
  color: var(--gray-500, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ✅ NEW: Stacked brand avatars for multi-brand proposals */
.brand-avatars-stack {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-avatar-stacked {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  font-weight: 700;
  font-size: 0.75rem;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}

.brand-avatar-stacked img,
img.brand-avatar-stacked {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background: white;
}

.brand-avatar-more {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* List values */
.list-value {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
}

.list-value-currency {
  color: #22c55e;
}

.list-value-items {
  font-size: 0.75rem;
  color: var(--gray-500, #6b7280);
}

.list-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gray-400, #9ca3af);
}

/* Deadline column */
.deadline-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.deadline-date {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
}

.deadline-remaining {
  font-size: 0.6875rem;
  color: var(--gray-500, #6b7280);
}

.deadline-remaining.overdue {
  color: #ef4444;
  font-weight: 600;
}

/* Overdue request styling */
.request-list-item.overdue-request {
  background: rgba(254, 202, 202, 0.15);
  border-left: 3px solid #ef4444;
}

.request-list-item.overdue-request:hover {
  background: rgba(254, 202, 202, 0.25);
}

/* List status badge */
.request-list-item .status-badge {
  font-size: 0.625rem;
  padding: 4px 10px;
}

/* List action buttons */
.btn-list-action {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--requests-gradient);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-list-action:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-list-more {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 6px;
  color: var(--gray-500, #6b7280);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-list-more:hover {
  background: var(--gray-100, #f3f4f6);
  border-color: var(--gray-300, #d1d5db);
}

/* ============================================================
   Accept/Decline/Overdue Buttons - Global Styles
   ============================================================ */
.btn-accept {
  background: #10b981;
  border: none;
  color: white;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-accept:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.25);
}

.btn-accept:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-decline {
  background: transparent;
  border: 1px solid #fca5a5;
  color: #ef4444;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-decline:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
}

.btn-decline:disabled {
  background: #fee2e2;
  border-color: #fecaca;
  color: #f87171;
  cursor: not-allowed;
}

/* Overdue state button - special styling */
.btn-decline:disabled[title*="overdue"],
.btn-decline:disabled[title*="Overdue"] {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

/* View button */
.btn-view {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: var(--reseller-dark);
  border: 1px solid var(--reseller-dark);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-view:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Request card specific button overrides */
.request-card-footer .request-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.request-card-footer .btn-accept,
.request-card-footer .btn-decline {
  flex: 1;
  justify-content: center;
  padding: 8px 12px;
}

.request-card-footer .btn-view,
.request-card-footer .btn-request-view {
  flex: 0 0 auto;
}

/* btn-request-view styling (card view) */
.btn-request-view {
  background: white;
  color: var(--reseller-dark);
  border: 1px solid var(--reseller-dark);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-request-view:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Desktop list view */
@media (min-width: 992px) {
  .request-list-item {
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    gap: 16px;
  }

  .list-col-value {
    flex: 0 0 110px;
  }
  .list-col-deadline {
    flex: 0 0 130px;
  }
  .list-col-actions {
    /* min-width: 180px; */
  }
}

/* Mobile list view - stacked layout */
@media (max-width: 991.98px) {
  .request-list-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 8px 16px;
  }

  .list-col-request {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .list-col-status {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-content: flex-end;
  }

  .list-col-brand,
  .list-col-value,
  .list-col-deadline {
    display: none;
  }

  .list-col-actions {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--gray-100, #f3f4f6);
  }

  .request-list-item .btn-view {
    flex: 1;
    max-width: 160px;
  }

  .request-list-item .btn-view::after {
    content: "View";
    margin-left: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
  }
}

/* Small mobile */
@media (max-width: 575.98px) {
  .requests-list-container {
    border-radius: var(--radius-md);
  }

  .request-list-item {
    padding: 12px;
  }

  .request-list-title {
    font-size: 0.875rem;
  }
}

/* View transition animations */
.requests-cards-container,
.requests-list-container {
  transition: opacity 0.2s ease;
}

.requests-cards-container.switching,
.requests-list-container.switching {
  opacity: 0;
}

/* ==========================================================================
   PROPOSALS SUBMODULE - Enterprise Design (Matching Requests)
   ========================================================================== */

/* Proposals Color Scheme */
:root {
  --proposals-primary: #8b5cf6;
  --proposals-primary-light: #a78bfa;
  --proposals-primary-dark: #7c3aed;
  --proposals-gradient: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --proposals-success: #10b981;
  --proposals-warning: #f59e0b;
  --proposals-danger: #ef4444;
}

/* ==========================================================================
   PROPOSALS LIST VIEW - Enterprise Table-Style Layout
   ========================================================================== */

.proposals-list-container {
  background: white;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.proposals-list-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--gray-50, #f9fafb);
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500, #6b7280);
}

.proposals-list-header .list-col {
  padding: 0 8px;
}

.proposals-list-body {
  display: flex;
  flex-direction: column;
}

.proposal-list-item {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  transition: all 0.15s ease;
  gap: 12px;
}

.proposal-list-item:last-child {
  border-bottom: none;
}

.proposal-list-item:hover {
  background: rgba(139, 92, 246, 0.02);
}

.proposal-list-item:focus-visible {
  outline: 2px solid var(--proposals-primary);
  outline-offset: -2px;
}

/* Proposal List Columns */
.list-col-proposal {
  flex: 2;
  min-width: 200px;
  max-width: 220px;
}

.list-col-brands {
  flex: 1.5;
  min-width: 180px;
  max-width: 220px;
}

.list-col-items {
  flex: 0 0 80px;
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

.list-col-discount {
  flex: 0 0 100px;
  min-width: 100px;
  max-width: 100px;
}

.list-col-total {
  flex: 0 0 120px;
  min-width: 120px;
  max-width: 120px;
}

.list-col-created {
  flex: 0 0 110px;
  min-width: 110px;
  max-width: 110px;
}

/* Proposal Info in List */
.proposal-list-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.proposal-id-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  color: var(--gray-100);
  background: var(--proposals-primary-light);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

.proposal-list-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proposal-list-subtitle {
  font-size: 0.75rem;
  color: var(--gray-500, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brand Logos Stack */
.brand-logos-stack {
  display: flex;
  align-items: center;
  gap: 0;
}

.brand-logo-mini {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-left: -8px;
  transition: transform 0.15s ease, z-index 0.15s ease;
  padding: 3px;
}

.brand-logo-mini:first-child {
  margin-left: 0;
}

.brand-logo-mini:hover {
  transform: scale(1.1);
  z-index: 10;
}

.brand-logo-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    var(--proposals-primary) 0%,
    var(--proposals-primary-dark) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.6875rem;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-left: -8px;
}

.brand-logo-placeholder:first-child {
  margin-left: 0;
}

.brands-more-count {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--gray-100, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600, #4b5563);
  font-weight: 600;
  font-size: 0.6875rem;
  border: 2px solid white;
  margin-left: -8px;
}

/* List Value Styles */
.proposal-list-value {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
}

.proposal-list-value.currency {
  color: #22c55e;
}

.proposal-list-value.discount {
  color: var(--proposals-primary);
}

.proposal-list-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gray-400, #9ca3af);
  margin-top: 2px;
}

/* Items Count Badge */
.items-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  background: rgba(139, 92, 246, 0.1);
  color: var(--proposals-primary);
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 8px;
}

/* Timeline Info */
.timeline-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-date {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
}

.timeline-relative {
  font-size: 0.6875rem;
  color: var(--gray-500, #6b7280);
}

/* Proposal Status Badges */
.proposal-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.proposal-status-badge.draft {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.proposal-status-badge.submitted {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.proposal-status-badge.selected {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.proposal-status-badge.rejected {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.proposal-status-badge.expired {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

/* List Action Buttons */
.btn-proposal-action {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--proposals-gradient);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-proposal-action:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-proposal-action.secondary {
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-700, #374151);
}

.btn-proposal-action.secondary:hover {
  background: var(--gray-200, #e5e7eb);
  box-shadow: none;
}

/* ==========================================================================
   PROPOSALS CARD VIEW - Enterprise Design
   ========================================================================== */

.proposals-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.proposal-card-v2 {
  background: white;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.proposal-card-v2:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.12);
  transform: translateY(-2px);
}

/* Card Header - Dark gradient */
.proposal-card-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 16px;
  position: relative;
}

.proposal-card-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.proposal-card-number {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--proposals-primary-light);
  background: rgba(139, 92, 246, 0.2);
  padding: 4px 10px;
  border-radius: 6px;
}

.proposal-card-status {
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.proposal-card-status.draft {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

.proposal-card-status.submitted {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.proposal-card-status.selected {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.proposal-card-status.rejected {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.proposal-card-status.expired {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.proposal-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proposal-card-subtitle {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Card Brands Row */
.proposal-card-brands {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.proposal-card-brands .brand-logos-stack {
  flex-shrink: 0;
}

.proposal-card-brands .brand-logo-mini {
  border-color: rgba(255, 255, 255, 0.2);
}

.proposal-card-brands-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card Body - Light background */
.proposal-card-body {
  padding: 16px;
  background: white;
}

/* 2x2 Metrics Grid */
.proposal-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.proposal-metric-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--gray-50, #f9fafb);
  border-radius: 10px;
  border-left: 3px solid transparent;
}

.proposal-metric-cell.items {
  border-left-color: var(--proposals-primary);
}

.proposal-metric-cell.discount {
  border-left-color: #f59e0b;
}

.proposal-metric-cell.original {
  border-left-color: var(--gray-400, #9ca3af);
}

.proposal-metric-cell.total {
  border-left-color: #10b981;
}

.proposal-metric-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500, #6b7280);
}

.proposal-metric-value {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900, #111827);
}

.proposal-metric-value.currency {
  color: #22c55e;
}

.proposal-metric-value.discount {
  color: var(--proposals-primary);
}

/* Card Footer */
.proposal-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100, #f3f4f6);
}

.proposal-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.proposal-card-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-700, #374151);
}

.proposal-card-relative {
  font-size: 0.6875rem;
  color: var(--gray-500, #6b7280);
}

.proposal-card-actions {
  display: flex;
  gap: 8px;
}

.btn-card-action {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-card-action.primary {
  background: var(--proposals-gradient);
  color: white;
}

.btn-card-action.primary:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-card-action.secondary {
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-700, #374151);
}

.btn-card-action.secondary:hover {
  background: var(--gray-200, #e5e7eb);
}

/* ==========================================================================
   PROPOSALS STATS GRID - Header Stats
   ========================================================================== */

.proposals-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.proposals-stat-card {
  background: white;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.proposals-stat-card:hover {
  border-color: var(--proposals-primary);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.proposals-stat-card.active {
  border-color: var(--proposals-primary);
  background: rgba(139, 92, 246, 0.02);
}

.proposals-stat-card.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--proposals-gradient);
}

.proposals-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 1.125rem;
}

.proposals-stat-icon.all {
  background: rgba(139, 92, 246, 0.1);
  color: var(--proposals-primary);
}

.proposals-stat-icon.draft {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.proposals-stat-icon.submitted {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.proposals-stat-icon.selected {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.proposals-stat-icon.rejected {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.proposals-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900, #111827);
  line-height: 1;
  margin-bottom: 4px;
}

.proposals-stat-label {
  font-size: 0.75rem;
  color: var(--gray-500, #6b7280);
}

/* ==========================================================================
   PROPOSALS FILTER BAR
   ========================================================================== */

.proposals-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: white;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
  margin-bottom: 20px;
}

.proposals-search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.proposals-search-box input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}

.proposals-search-box input:focus {
  outline: none;
  border-color: var(--proposals-primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.proposals-search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400, #9ca3af);
}

.proposals-view-toggle {
  display: flex;
  background: var(--gray-100, #f3f4f6);
  border-radius: 8px;
  padding: 4px;
}

.proposals-view-toggle .btn-view-mode {
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--gray-500, #6b7280);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.proposals-view-toggle .btn-view-mode:hover {
  color: var(--gray-700, #374151);
}

.proposals-view-toggle .btn-view-mode.active {
  background: white;
  color: var(--proposals-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   PROPOSALS FOOTER - Summary Stats
   ========================================================================== */

.proposals-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
  margin-top: 20px;
}

.proposals-footer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.proposals-footer-stat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.proposals-footer-stat .stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.proposals-footer-stat .stat-icon.purple {
  background: rgba(139, 92, 246, 0.1);
  color: var(--proposals-primary);
}

.proposals-footer-stat .stat-icon.green {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.proposals-footer-stat .stat-icon.blue {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.proposals-footer-stat .stat-content {
  display: flex;
  flex-direction: column;
}

.proposals-footer-stat .stat-value {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900, #111827);
}

.proposals-footer-stat .stat-label {
  font-size: 0.6875rem;
  color: var(--gray-500, #6b7280);
}

/* ==========================================================================
   PROPOSALS EMPTY STATE
   ========================================================================== */

.proposals-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.proposals-empty-state .empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.proposals-empty-state .empty-icon i {
  font-size: 2rem;
  color: var(--proposals-primary);
}

.proposals-empty-state h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
  margin-bottom: 8px;
}

.proposals-empty-state p {
  font-size: 0.875rem;
  color: var(--gray-500, #6b7280);
  max-width: 400px;
}

/* ==========================================================================
   PROPOSALS CARD V2 - Additional Styles for JS rendering
   ========================================================================== */

/* Card Header Dark - Used by createProposalCardV2 */
.card-header-dark {
  background: var(--requests-primary);
  padding: var(--space-md);
  border-radius: 16px 16px 0 0;
}

.card-title-white {
  color: white;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.brands-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Card Body Light */
.card-body-light {
  padding: 16px;
  background: white;
}

/* Metrics Grid 2x2 */
.metrics-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.metric-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--gray-50, #f9fafb);
  border-radius: 10px;
  flex-direction: row;
}

.metric-cell .metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.metric-cell.metric-value .metric-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.metric-cell.metric-discount .metric-icon {
  background: rgba(139, 92, 246, 0.1);
  color: var(--proposals-primary);
}

.metric-cell.metric-items .metric-icon {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.metric-cell.metric-quotes .metric-icon {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.metric-cell .metric-data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.metric-cell .metric-number {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900, #111827);
  line-height: 1.2;
}

.metric-cell .metric-label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--gray-500, #6b7280);
  letter-spacing: 0.02em;
}

/* Card Footer Actions */
.card-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--gray-50, #f9fafb);
  border-top: 1px solid var(--gray-100, #f3f4f6);
  border-radius: 0 0 16px 16px;
}

.footer-meta {
  font-size: 0.75rem;
  color: var(--gray-500, #6b7280);
  display: flex;
  align-items: center;
  gap: 4px;
}

.footer-buttons {
  display: flex;
  gap: 8px;
}

/* Proposal Number Badge in Card */
.proposal-number-badge {
  display: inline-block;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--proposals-primary-light);
  background: rgba(139, 92, 246, 0.2);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

/* Proposal List Item Styles */
.proposal-list-meta {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.6875rem;
  color: var(--gray-500, #6b7280);
}

.proposal-list-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Brand Logo Mini - Additional styles */
.brand-logo-mini {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-left: -8px;
  transition: transform 0.15s ease, z-index 0.15s ease;
  overflow: hidden;
  background: var(--gray-100, #f3f4f6);
  position: relative;
}

.brand-logo-mini:first-child {
  margin-left: 0;
}

.brand-logo-mini:hover {
  transform: scale(1.1);
  z-index: 10;
}

.brand-logo-mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.brand-logo-mini.brand-initial,
.brand-logo-mini .brand-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    var(--proposals-primary) 0%,
    var(--proposals-primary-dark) 100%
  );
  color: white;
  font-weight: 700;
  font-size: 0.75rem;
}

.brand-logo-mini.brand-more {
  background: var(--gray-200, #e5e7eb);
  color: var(--gray-600, #4b5563);
  font-weight: 600;
  font-size: 0.6875rem;
}

/* Value Display in List */
.value-display {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.value-display .value-main {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 1rem;
  font-weight: 700;
  color: #22c55e;
}

.value-display .value-discount {
  margin-top: 2px;
}

.value-display .value-original {
  font-size: 0.75rem;
}

/* Card Grid Inner for Card View */
.proposals-card-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 2rem;
  color: var(--proposals-primary);
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 0.875rem;
  color: var(--gray-500, #6b7280);
  max-width: 400px;
  margin-bottom: 16px;
}

/* Loading Skeleton */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Slide In Animation */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   PROPOSALS RESPONSIVE - Mobile First
   ========================================================================== */

@media (max-width: 991.98px) {
  .proposals-list-header {
    display: none;
  }

  .proposal-list-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 12px;
    padding: 16px;
  }

  .proposal-list-item .list-col-proposal {
    grid-column: 1;
    grid-row: 1;
  }

  .proposal-list-item .list-col-status {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .proposal-list-item .list-col-brands {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .proposal-list-item .list-col-total,
  .proposal-list-item .list-col-discount {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .proposal-list-item .list-col-actions {
    grid-column: 2;
    grid-row: 3;
  }

  .proposals-cards-container {
    grid-template-columns: 1fr;
  }

  .proposals-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .proposals-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .proposals-search-box {
    min-width: 100%;
  }

  .proposals-view-toggle {
    justify-content: center;
  }

  .proposals-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .proposals-footer-stats {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 575.98px) {
  .proposals-list-container {
    border-radius: 12px;
    margin: 0 -8px;
  }

  .proposal-list-item {
    padding: 12px;
  }

  .proposals-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .proposals-stat-card {
    padding: 12px;
  }

  .proposals-stat-value {
    font-size: 1.25rem;
  }

  .proposal-card-v2 {
    border-radius: 12px;
  }

  .proposal-metrics-grid {
    gap: 8px;
  }

  .proposal-metric-cell {
    padding: 10px;
  }

  .proposal-metric-value {
    font-size: 1rem;
  }
}

/* View transition animations */
.proposals-cards-container,
.proposals-list-container {
  transition: opacity 0.2s ease;
}

.proposals-cards-container.switching,
.proposals-list-container.switching {
  opacity: 0;
}

/* ==========================================================================
   ORDERS MODULE v6.0 - Enterprise Cards & List View
   Matching Requests UI Pattern
   ========================================================================== */

/* Orders Container */
.orders-container {
  padding: 0;
}

/* Orders List Container */
.orders-list-container {
  background: var(--color-white);
  border-radius: 0;
}

/* Orders List Header */
.orders-list-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-600);
}

.orders-list-header .list-col {
  flex-shrink: 0;
}

.orders-list-header .list-col-order {
  flex: 2;
  min-width: 200px;
}

.orders-list-header .list-col-status {
  flex: 0 0 120px;
  text-align: center;
}

.orders-list-header .list-col-brands {
  flex: 0 0 80px;
  text-align: center;
}

.orders-list-header .list-col-items {
  flex: 0 0 80px;
  text-align: center;
}

.orders-list-header .list-col-value {
  flex: 0 0 120px;
  text-align: right;
}

.orders-list-header .list-col-date {
  flex: 0 0 110px;
  text-align: center;
}

.orders-list-header .list-col-actions {
  flex: 0 0 140px;
  text-align: right;
}

/* Orders List Body */
.orders-list-body {
  display: flex;
  flex-direction: column;
}

/* Order List Item - Enterprise v6.1 */
.order-list-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  transition: background-color 0.15s ease;
  gap: 16px;
}

.order-list-item:hover {
  background: var(--gray-50);
}

.order-list-item:last-child {
  border-bottom: none;
}

/* Order List Item Columns - Matching Header */
.order-list-item .list-col {
  flex-shrink: 0;
}

.order-list-item .list-col-order {
  flex: 2;
  min-width: 200px;
}

.order-list-item .list-col-status {
  flex: 0 0 120px;
  text-align: center;
}

.order-list-item .list-col-items {
  flex: 0 0 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-list-item .list-col-value {
  flex: 0 0 120px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.order-list-item .list-col-brands {
  flex: 0 0 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-list-item .list-col-date {
  flex: 0 0 110px;
  text-align: center;
  color: var(--gray-600);
  font-size: 0.875rem;
}

.order-list-item .list-col-actions {
  flex: 0 0 140px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Order List Item Inner Elements */
.order-list-item .order-id-badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.order-list-item .order-info {
  min-width: 0;
}

.order-list-item .order-client {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-list-item .order-project {
  font-size: 0.8125rem;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Value column styling */
.order-list-item .items-value,
.order-list-item .brands-value {
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--gray-900);
}

.order-list-item .items-label,
.order-list-item .brands-label {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.order-list-item .value-amount {
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--success-600);
}

.order-list-item .value-savings {
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* Margin display (reseller profit indicator) */
.order-list-item .value-margin {
  font-size: 0.75rem;
  font-weight: 500;
}

.order-list-item .value-margin.text-success {
  color: var(--success-600) !important;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .order-list-item .list-col-brands,
  .order-list-item .list-col-date {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .order-list-item .list-col-items {
    display: none;
  }

  .order-list-item {
    padding: 12px 16px;
  }
}

/* Orders Cards Container */
.orders-cards-container {
  padding: 20px;
}

/* Orders Accordion Grid */
.orders-accordion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* Order Card v6.0 - Matching Request Card Design */
.order-card {
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.order-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Order Card Header - Dark Gradient */
.order-card-header {
  background: var(--reseller-dark);
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.order-header-content {
  flex: 1;
  min-width: 0;
}

.order-number {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--requests-primary);
  background: var(--reseller-light);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.order-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-white);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-subtitle {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.order-subtitle i {
  font-size: 0.75rem;
}

/* Order Card Body */
.order-card-body {
  padding: 16px;
  flex: 1;
}

/* Order Metrics Grid - 2x2 */
.order-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.order-metrics .metric-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: 10px;
  border-left: 3px solid var(--gray-300);
}

.order-metrics .metric-item.metric-items {
  border-left-color: var(--info);
}

.order-metrics .metric-item.metric-value-card {
  border-left-color: var(--success);
}

.order-metrics .metric-item.metric-brands {
  border-left-color: var(--purple);
}

.order-metrics .metric-item.metric-savings {
  border-left-color: var(--warning);
}

.order-metrics .metric-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--gray-600);
}

.order-metrics .metric-content {
  flex: 1;
  min-width: 0;
}

.order-metrics .metric-value {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.order-metrics .metric-label {
  font-size: 0.75rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Order Card Footer */
.order-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.order-card-footer .card-footer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.order-card-footer .card-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Status Badges for Orders */
.status-badge-confirmed {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-badge-in-production {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.status-badge-shipped {
  background: rgba(139, 92, 246, 0.1);
  color: var(--purple);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.status-badge-delivered {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.status-badge-cancelled {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Order Status Badges (generic) */
.order-card-header .status-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Orders Empty State */
.orders-cards-container .enterprise-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.enterprise-empty-state .empty-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--info);
  margin-bottom: 20px;
}

.enterprise-empty-state .empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.enterprise-empty-state .empty-state-description {
  font-size: 0.875rem;
  color: var(--gray-500);
  max-width: 400px;
  margin-bottom: 16px;
}

/* Orders Grouped View */
.orders-grouped .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
}

.orders-grouped .accordion-body {
  padding: 16px;
  background: var(--gray-50);
}

/* ==========================================================================
   ORDERS RESPONSIVE - Mobile First
   ========================================================================== */

@media (max-width: 991.98px) {
  .orders-list-header {
    display: none;
  }

  .order-list-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 12px;
    padding: 16px;
  }

  .orders-accordion-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .orders-cards-container {
    padding: 12px;
  }

  .order-card-header {
    padding: 14px;
  }

  .order-title {
    font-size: 0.9375rem;
  }

  .order-metrics {
    gap: 8px;
  }

  .order-metrics .metric-item {
    padding: 8px 10px;
  }

  .order-metrics .metric-value {
    font-size: 1rem;
  }

  .order-card-footer {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .order-card-footer .card-footer-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 575.98px) {
  .orders-accordion-grid {
    gap: 12px;
  }

  .order-card {
    border-radius: 12px;
  }

  .order-card-header {
    padding: 12px;
  }

  .order-metrics .metric-icon {
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   MANUFACTURER QUOTES & ORDERS - Action Buttons (Enterprise Design)
   Matching Proposals/Requests button patterns
   ========================================================================== */

/* Action buttons container */
.action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Base action button styles - icon-only circular buttons */
.btn-action {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.875rem;
}

.btn-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary action button (view) */
.btn-action-primary {
  background: var(--requests-gradient);
  color: white;
}

.btn-action-primary:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Outline action button (message, secondary) */
.btn-action-outline {
  background: white;
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}

.btn-action-outline:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-300);
  color: var(--gray-700);
}

/* Success action button (accept) */
.btn-action-success {
  background: #10b981;
  color: white;
}

.btn-action-success:hover:not(:disabled) {
  background: #059669;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Danger action button (reject) */
.btn-action-danger {
  background: transparent;
  color: #ef4444;
  border: 1px solid #fca5a5;
}

.btn-action-danger:hover:not(:disabled) {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

/* Warning action button (pending/edit) */
.btn-action-warning {
  background: #f59e0b;
  color: white;
}

.btn-action-warning:hover:not(:disabled) {
  background: #d97706;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Info action button (track) */
.btn-action-info {
  background: #3b82f6;
  color: white;
}

.btn-action-info:hover:not(:disabled) {
  background: #2563eb;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* ==========================================================================
   MANUFACTURER QUOTES - List Item Specific Styles
   ========================================================================== */

/* Request info in list */
.request-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.request-number {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  color: var(--requests-primary);
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

.request-project {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.request-client {
  font-size: 0.75rem;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brand info mini (for list view) */
.brand-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-avatar-mini {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
}

.manufacturer-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-900);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-name-sub {
  font-size: 0.6875rem;
  color: var(--gray-500);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Value display */
.value-display {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gray-900);
  display: block;
}

.savings-display {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #10b981;
  display: block;
}

/* Discount badge */
.discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.625rem;
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}

/* Deadline/Expiry display */
.deadline-display {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-600);
}

.deadline-display.text-danger {
  color: #ef4444;
  font-weight: 600;
}

/* ==========================================================================
   MANUFACTURER ORDERS - List Item Specific Styles
   ========================================================================== */

/* Order reference badge */
.order-reference {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

.order-project {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-client {
  font-size: 0.75rem;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Progress display */
.progress-display {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-600);
}

.progress-bar-mini {
  width: 60px;
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.progress-bar-mini .progress-fill {
  height: 100%;
  background: var(--requests-gradient);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* ==========================================================================
   STATUS BADGES - Enterprise Design (All Components)
   ========================================================================== */

/* Base status badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Status badge variants */
.status-badge-pending,
.status-badge-submitted {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.status-badge-quoted,
.status-badge-active {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.status-badge-accepted,
.status-badge-selected,
.status-badge-delivered {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.status-badge-rejected,
.status-badge-declined,
.status-badge-cancelled {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.status-badge-expired {
  background: rgba(107, 114, 128, 0.1);
  color: #4b5563;
}

.status-badge-in_production,
.status-badge-production {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

.status-badge-shipped {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.status-badge-draft {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

/* ==========================================================================
   MANUFACTURER QUOTES & ORDERS - Desktop Table Alignment (Large Screens)
   ========================================================================== */

/* Desktop: Fixed column widths for perfect alignment */
@media (min-width: 992px) {
  /* Container for list view */
  .manufacturer-quotes-container .requests-list-container,
  .manufacturer-orders-container .requests-list-container {
    border-radius: 12px;
    overflow: hidden;
    background: white;
    border: 1px solid var(--gray-200, #e5e7eb);
  }

  /* Header row styling */
  .manufacturer-quotes-container .requests-list-header,
  .manufacturer-orders-container .requests-list-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: var(--gray-50, #f9fafb);
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500, #6b7280);
    gap: 16px;
  }

  /* List item row styling */
  .manufacturer-quotes-container .request-list-item,
  .manufacturer-orders-container .request-list-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    gap: 16px;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
    transition: background-color 0.15s ease;
  }

  .manufacturer-quotes-container .request-list-item:hover,
  .manufacturer-orders-container .request-list-item:hover {
    background-color: rgba(16, 185, 129, 0.02);
  }

  .manufacturer-quotes-container .request-list-item:last-child,
  .manufacturer-orders-container .request-list-item:last-child {
    border-bottom: none;
  }

  /* Fixed column widths for alignment */
  .manufacturer-quotes-container .list-col-request,
  .manufacturer-orders-container .list-col-request {
    flex: 0 0 200px;
    min-width: 200px;
    max-width: 200px;
  }

  .manufacturer-quotes-container .list-col-brand,
  .manufacturer-orders-container .list-col-brand {
    flex: 0 0 200px;
    min-width: 200px;
    max-width: 200px;
  }

  .manufacturer-quotes-container .list-col-value,
  .manufacturer-orders-container .list-col-value {
    flex: 0 0 110px;
    min-width: 110px;
    max-width: 110px;
    text-align: right;
  }

  .manufacturer-quotes-container .list-col-status,
  .manufacturer-orders-container .list-col-status {
    flex: 0 0 100px;
    min-width: 100px;
    max-width: 100px;
    justify-content: center;
  }

  .manufacturer-quotes-container .list-col-deadline,
  .manufacturer-orders-container .list-col-deadline {
    flex: 0 0 100px;
    min-width: 100px;
    max-width: 100px;
  }

  .manufacturer-quotes-container .list-col-actions,
  .manufacturer-orders-container .list-col-actions {
    flex: 0 0 120px;
    min-width: 120px;
    justify-content: flex-end;
  }

  /* Value alignment for currency display */
  .manufacturer-quotes-container .list-col-value .value-display,
  .manufacturer-orders-container .list-col-value .value-display {
    text-align: right;
    display: block;
  }

  .manufacturer-quotes-container .list-col-value .savings-display,
  .manufacturer-quotes-container .list-col-value .items-count,
  .manufacturer-orders-container .list-col-value .savings-display,
  .manufacturer-orders-container .list-col-value .items-count {
    text-align: right;
    display: block;
  }

  /* Status badge centering */
  .manufacturer-quotes-container .list-col-status,
  .manufacturer-orders-container .list-col-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  /* Progress mini display */
  .manufacturer-orders-container .progress-mini {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  .manufacturer-orders-container .progress-mini .progress {
    width: 80px;
  }

  .manufacturer-orders-container .progress-mini .progress-text {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-600);
    font-family: var(--font-mono);
  }
}

/* ==========================================================================
   MANUFACTURER QUOTES & ORDERS - Enterprise Card View
   ========================================================================== */

/* Card grid layout */
.manufacturer-quotes-container .proposals-card-grid,
.manufacturer-orders-container .proposals-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 20px;
}

@media (min-width: 1200px) {
  .manufacturer-quotes-container .proposals-card-grid,
  .manufacturer-orders-container .proposals-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767.98px) {
  .manufacturer-quotes-container .proposals-card-grid,
  .manufacturer-orders-container .proposals-card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  .clients-body {
    padding: var(--space-md) 0 !important;
  }
}

/* Enterprise Card Footer buttons */
.btn-enterprise-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-enterprise-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-enterprise-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-enterprise-icon:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  color: var(--gray-700);
}

/* Enterprise Empty State */
.enterprise-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.enterprise-empty-state .empty-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--gray-400);
  margin-bottom: 20px;
}

.enterprise-empty-state .empty-state-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.enterprise-empty-state .empty-state-description {
  font-size: 0.875rem;
  color: var(--gray-500);
  max-width: 300px;
}

/* Items count styling */
.items-count {
  font-size: 0.6875rem;
  color: var(--gray-500);
  display: block;
}

/* Brand logo mini for orders */
.brand-logo-mini {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  background: white;
  border: 1px solid var(--gray-200);
  padding: 4px;
}

/* ==========================================================================
   MOBILE RESPONSIVE - Manufacturer Quotes & Orders
   ========================================================================== */

@media (max-width: 991.98px) {
  /* Mobile list item as grid */
  .manufacturer-quotes-container .request-list-item,
  .manufacturer-orders-container .request-list-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 12px 16px;
    padding: 16px;
  }

  /* Request details - full width first row left */
  .manufacturer-quotes-container .list-col-request,
  .manufacturer-orders-container .list-col-request {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    max-width: none;
  }

  /* Status - first row right */
  .manufacturer-quotes-container .list-col-status,
  .manufacturer-orders-container .list-col-status {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-content: flex-end;
    max-width: none;
  }

  /* Value - second row left */
  .manufacturer-quotes-container .list-col-value,
  .manufacturer-orders-container .list-col-value {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    text-align: left;
    max-width: none;
  }

  /* Actions - second row right */
  .manufacturer-quotes-container .list-col-actions,
  .manufacturer-orders-container .list-col-actions {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-content: flex-end;
    max-width: none;
  }

  /* Hide less important columns */
  .manufacturer-quotes-container .list-col-brand,
  .manufacturer-quotes-container .list-col-deadline,
  .manufacturer-orders-container .list-col-brand,
  .manufacturer-orders-container .list-col-deadline {
    display: none;
  }

  /* Action buttons sizing */
  .action-buttons {
    gap: 8px;
  }

  .btn-action {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

@media (max-width: 575.98px) {
  /* Smaller mobile - stack vertically */
  .manufacturer-quotes-container .request-list-item,
  .manufacturer-orders-container .request-list-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
  }

  .manufacturer-quotes-container .list-col-request,
  .manufacturer-orders-container .list-col-request {
    grid-column: 1;
    grid-row: 1;
  }

  .manufacturer-quotes-container .list-col-value,
  .manufacturer-orders-container .list-col-value {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .manufacturer-quotes-container .list-col-status,
  .manufacturer-orders-container .list-col-status {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .manufacturer-quotes-container .list-col-actions,
  .manufacturer-orders-container .list-col-actions {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
    width: 100%;
  }

  /* Make relative for absolute positioning */
  .manufacturer-quotes-container .request-list-item,
  .manufacturer-orders-container .request-list-item {
    position: relative;
  }

  /* Action buttons - larger touch targets */
  .btn-action {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   MANUFACTURER QUOTES & ORDERS - Extra Polish & Refinements
   ========================================================================== */

/* Value column vertical alignment */
.manufacturer-quotes-container .list-col-value,
.manufacturer-orders-container .list-col-value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

/* Savings display styling */
.manufacturer-quotes-container .savings-display,
.manufacturer-orders-container .savings-display {
  font-size: 0.625rem;
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

/* Items count styling in value column */
.manufacturer-orders-container .items-count {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--gray-500);
  background: rgba(107, 114, 128, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

/* Request info vertical alignment */
.manufacturer-quotes-container .request-info,
.manufacturer-orders-container .request-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}

/* Brand info vertical centering */
.manufacturer-quotes-container .brand-info,
.manufacturer-orders-container .brand-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.manufacturer-quotes-container .brand-info > div,
.manufacturer-orders-container .brand-info > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Progress mini alignment */
.manufacturer-orders-container .progress-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Action buttons alignment */
.manufacturer-quotes-container .list-col-actions .action-buttons,
.manufacturer-orders-container .list-col-actions .action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Zebra striping for better readability */
.manufacturer-quotes-container .request-list-item:nth-child(even),
.manufacturer-orders-container .request-list-item:nth-child(even) {
  background-color: rgba(249, 250, 251, 0.5);
}

.manufacturer-quotes-container .request-list-item:nth-child(even):hover,
.manufacturer-orders-container .request-list-item:nth-child(even):hover {
  background-color: rgba(16, 185, 129, 0.03);
}

/* Card view - enterprise card enhancements */
.manufacturer-quotes-container .enterprise-card,
.manufacturer-orders-container .enterprise-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  background: white;
  border: 1px solid var(--gray-200);
}

.manufacturer-quotes-container .enterprise-card:hover,
.manufacturer-orders-container .enterprise-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Enterprise card header */
.manufacturer-quotes-container .enterprise-card-header,
.manufacturer-orders-container .enterprise-card-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 16px;
  color: white;
}

/* Enterprise card metrics grid */
.manufacturer-quotes-container .enterprise-card-metrics,
.manufacturer-orders-container .enterprise-card-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.manufacturer-quotes-container .enterprise-card-metrics .metric-item,
.manufacturer-orders-container .enterprise-card-metrics .metric-item {
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: 8px;
  border-left: 3px solid var(--gray-300);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.manufacturer-quotes-container .enterprise-card-metrics .metric-label,
.manufacturer-orders-container .enterprise-card-metrics .metric-label {
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}

.manufacturer-quotes-container .enterprise-card-metrics .metric-value,
.manufacturer-orders-container .enterprise-card-metrics .metric-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gray-900);
  font-family: var(--font-mono);
}

/* Enterprise card footer */
.manufacturer-quotes-container .enterprise-card-footer,
.manufacturer-orders-container .enterprise-card-footer {
  padding: 12px 16px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.manufacturer-quotes-container .card-footer-actions,
.manufacturer-orders-container .card-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Status badge in card header */
.manufacturer-quotes-container .status-badge-enterprise,
.manufacturer-orders-container .status-badge-enterprise {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Loading row styling */
.manufacturer-quotes-container .loading-row,
.manufacturer-orders-container .loading-row {
  min-height: 100px;
}

/* Header columns text alignment */
@media (min-width: 992px) {
  .manufacturer-quotes-container .requests-list-header .list-col-value,
  .manufacturer-orders-container .requests-list-header .list-col-value {
    text-align: right;
    justify-content: flex-end;
  }

  .manufacturer-quotes-container .requests-list-header .list-col-status,
  .manufacturer-orders-container .requests-list-header .list-col-status {
    text-align: center;
    justify-content: center;
  }

  .manufacturer-quotes-container .requests-list-header .list-col-actions,
  .manufacturer-orders-container .requests-list-header .list-col-actions {
    text-align: right;
    justify-content: flex-end;
  }

  /* Ensure value column in rows aligns right */
  .manufacturer-quotes-container .request-list-item .list-col-value,
  .manufacturer-orders-container .request-list-item .list-col-value {
    justify-content: flex-end;
    text-align: right;
  }

  .manufacturer-quotes-container
    .request-list-item
    .list-col-value
    .value-display,
  .manufacturer-orders-container
    .request-list-item
    .list-col-value
    .value-display {
    text-align: right;
  }

  .manufacturer-quotes-container
    .request-list-item
    .list-col-value
    .savings-display,
  .manufacturer-quotes-container
    .request-list-item
    .list-col-value
    .items-count,
  .manufacturer-orders-container
    .request-list-item
    .list-col-value
    .savings-display,
  .manufacturer-orders-container
    .request-list-item
    .list-col-value
    .items-count {
    margin-left: auto;
  }
}

/* ==========================================================================
   VIEW TOGGLE BUTTONS - Enhanced Styling
   ========================================================================== */
.manufacturer-quotes-container .btn-group .btn,
.manufacturer-orders-container .btn-group .btn {
  padding: 6px 12px;
  font-size: 0.875rem;
}

.manufacturer-quotes-container .btn-group .btn.active,
.manufacturer-orders-container .btn-group .btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #10b981;
  color: white;
}

.manufacturer-quotes-container .btn-group .btn:not(.active):hover,
.manufacturer-orders-container .btn-group .btn:not(.active):hover {
  background: var(--gray-100);
}

/* ==========================================================================
   RESELLERS CLIENTS - Client management styles (Enterprise Design)
   ========================================================================== */
.clients-body {
  padding: 0;
}

/* Client Card Grid Layout */
.clients-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
  padding: 24px;
}

@media (max-width: 992px) {
  .clients-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .clients-card-grid {
    grid-template-columns: 1fr !important;
    padding: 16px;
    gap: 16px;
  }

  .client-list-container {
    padding: var(--space-xs);
  }
}

/* Client Card v2 - Enterprise Design */
.client-card-v2 {
  background: white;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.client-card-v2:hover {
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12);
  transform: translateY(-2px);
}

/* Client Avatar Large */
.client-avatar-large {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* Client Type Badge */
.client-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

/* Contact Info Compact */
.contact-info-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--gray-700);
}

.contact-item i {
  font-size: 1rem;
  flex-shrink: 0;
}

.contact-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Client Avatar Mini for List View */
.client-avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Client Type Badge Compact */
.client-type-badge-compact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--gray-100);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-700);
}

/* Reuse existing card styles from proposals */
.card-header-dark {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 20px;
  position: relative;
  color: white;
}

.card-header-dark h6,
.card-header-dark .card-title-white {
  color: white !important;
}

.card-header-dark small,
.card-header-dark .text-white-50 {
  display: block;
  margin-top: 4px;
}

.card-title-white {
  font-size: 1.125rem;
  font-weight: 600;
  color: white !important;
  margin: 0;
  line-height: 1.5;
  word-break: break-word;
  max-width: 100%;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.875rem;
  line-height: 1.5;
}

.card-body-light {
  padding: 16px;
  background: white;
}

/* Metrics Grid 2x2 - Reusable */
.metrics-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.metric-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: 12px;
  border-left: 3px solid var(--gray-300);
}

.metric-cell.metric-projects {
  border-left-color: #3b82f6;
}

.metric-cell.metric-value {
  border-left-color: #10b981;
}

.metric-cell.metric-activity {
  border-left-color: #f59e0b;
}

.metric-cell.metric-status {
  border-left-color: #8b5cf6;
}

.metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-icon i {
  font-size: 1.25rem;
  color: var(--gray-600);
}

.metric-data {
  flex: 1;
  min-width: 0;
}

.metric-number {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-label {
  font-size: 0.75rem;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Card Footer Actions */
.card-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.footer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--gray-600);
}

.footer-meta i {
  font-size: 0.875rem;
}

.footer-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-buttons .btn-sm {
  padding: 6px 12px;
  font-size: 0.813rem;
  border-radius: 8px;
}

/* Tablet Responsive */
@media (max-width: 992px) {
  .clients-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .clients-card-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 16px;
  }

  .metrics-grid-2x2 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .client-avatar-large {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }

  .card-header-dark {
    padding: 18px;
  }

  .card-body-light {
    padding: 16px;
  }

  .card-footer-actions {
    padding: 14px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .footer-meta {
    justify-content: center;
    font-size: 0.875rem;
  }

  .footer-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .footer-buttons .btn-sm {
    padding: 12px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
  }

  .card-title-white {
    font-size: 1.125rem;
    font-weight: 600;
  }

  .client-card-v2 {
    margin-bottom: 0;
  }

  .metric-cell {
    padding: 12px;
  }
}