/*
  Comprehensive design system for Lead Management System
  - Inter font imported from Google Fonts
  - CSS Custom Properties (design tokens)
  - Utilities, components, dark mode support
*/

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

:root {
  /* Color Palette */
  --color-primary: #3B82F6;
  /* blue-500 */
  --color-primary-dark: #2563EB;
  /* blue-600 */
  --color-primary-light: #60A5FA;
  /* blue-400 */

  --color-white: #FFFFFF;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-info: #06B6D4;

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Spacing scale */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --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-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  /* Dark mode token fallbacks (can be overridden in dark media query) */
  --color-bg: var(--color-gray-50);
  --color-surface: var(--color-white);
  --color-border: var(--color-gray-200);
}

/* Base resets */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-gray-900);
  background-color: var(--color-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

/* Card system */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  overflow: hidden;
}

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

.card-header {
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
  font-weight: var(--font-semibold);
  background: transparent;
}

.card-body {
  padding: var(--spacing-6);
}

/* Typography utilities */
.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-base {
  font-size: var(--text-base);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-2xl {
  font-size: var(--text-2xl);
}

.text-3xl {
  font-size: var(--text-3xl);
}

.text-4xl {
  font-size: var(--text-4xl);
}

.font-light {
  font-weight: var(--font-light);
}

.font-normal {
  font-weight: var(--font-normal);
}

.font-medium {
  font-weight: var(--font-medium);
}

.font-semibold {
  font-weight: var(--font-semibold);
}

.font-bold {
  font-weight: var(--font-bold);
}

.text-gray-500 {
  color: var(--color-gray-500);
}

.text-gray-600 {
  color: var(--color-gray-600);
}

.text-gray-700 {
  color: var(--color-gray-700);
}

.text-gray-900 {
  color: var(--color-gray-900);
}

.leading-tight {
  line-height: var(--leading-tight);
}

.leading-normal {
  line-height: var(--leading-normal);
}

.leading-relaxed {
  line-height: var(--leading-relaxed);
}

/* Spacing utilities (prefixed to avoid Bootstrap collision): u-m-*, u-p-* */
/* Margin: u-m-{scale} and axis variants u-mt, u-mb, u-ml, u-mr, u-mx, u-my */
.u-m-0 {
  margin: 0;
}

.u-m-1 {
  margin: var(--spacing-1);
}

.u-m-2 {
  margin: var(--spacing-2);
}

.u-m-3 {
  margin: var(--spacing-3);
}

.u-m-4 {
  margin: var(--spacing-4);
}

.u-m-5 {
  margin: var(--spacing-5);
}

.u-m-6 {
  margin: var(--spacing-6);
}

.u-m-8 {
  margin: var(--spacing-8);
}

.u-m-10 {
  margin: var(--spacing-10);
}

.u-m-12 {
  margin: var(--spacing-12);
}

.u-m-16 {
  margin: var(--spacing-16);
}

.u-m-20 {
  margin: var(--spacing-20);
}

.u-mt-0 {
  margin-top: 0;
}

.u-mt-1 {
  margin-top: var(--spacing-1);
}

.u-mt-2 {
  margin-top: var(--spacing-2);
}

.u-mt-3 {
  margin-top: var(--spacing-3);
}

.u-mt-4 {
  margin-top: var(--spacing-4);
}

.u-mt-5 {
  margin-top: var(--spacing-5);
}

.u-mt-6 {
  margin-top: var(--spacing-6);
}

.u-mb-0 {
  margin-bottom: 0;
}

.u-mb-1 {
  margin-bottom: var(--spacing-1);
}

.u-mb-2 {
  margin-bottom: var(--spacing-2);
}

.u-mb-3 {
  margin-bottom: var(--spacing-3);
}

.u-mb-4 {
  margin-bottom: var(--spacing-4);
}

.u-mb-5 {
  margin-bottom: var(--spacing-5);
}

.u-mb-6 {
  margin-bottom: var(--spacing-6);
}

.u-ml-0 {
  margin-left: 0;
}

.u-ml-1 {
  margin-left: var(--spacing-1);
}

.u-ml-2 {
  margin-left: var(--spacing-2);
}

.u-ml-3 {
  margin-left: var(--spacing-3);
}

.u-ml-4 {
  margin-left: var(--spacing-4);
}

.u-ml-5 {
  margin-left: var(--spacing-5);
}

.u-ml-6 {
  margin-left: var(--spacing-6);
}

.u-mr-0 {
  margin-right: 0;
}

.u-mr-1 {
  margin-right: var(--spacing-1);
}

.u-mr-2 {
  margin-right: var(--spacing-2);
}

.u-mr-3 {
  margin-right: var(--spacing-3);
}

.u-mr-4 {
  margin-right: var(--spacing-4);
}

.u-mr-5 {
  margin-right: var(--spacing-5);
}

.u-mr-6 {
  margin-right: var(--spacing-6);
}

.u-mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.u-mx-1 {
  margin-left: var(--spacing-1);
  margin-right: var(--spacing-1);
}

.u-mx-2 {
  margin-left: var(--spacing-2);
  margin-right: var(--spacing-2);
}

.u-mx-3 {
  margin-left: var(--spacing-3);
  margin-right: var(--spacing-3);
}

.u-mx-4 {
  margin-left: var(--spacing-4);
  margin-right: var(--spacing-4);
}

.u-mx-5 {
  margin-left: var(--spacing-5);
  margin-right: var(--spacing-5);
}

.u-mx-6 {
  margin-left: var(--spacing-6);
  margin-right: var(--spacing-6);
}

.u-my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.u-my-1 {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}

.u-my-2 {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.u-my-3 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.u-my-4 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.u-my-5 {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}

.u-my-6 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

/* Padding: u-p-{scale} and axis variants u-pt, u-pb, u-pl, u-pr, u-px, u-py */
.u-p-0 {
  padding: 0;
}

.u-p-1 {
  padding: var(--spacing-1);
}

.u-p-2 {
  padding: var(--spacing-2);
}

.u-p-3 {
  padding: var(--spacing-3);
}

.u-p-4 {
  padding: var(--spacing-4);
}

.u-p-5 {
  padding: var(--spacing-5);
}

.u-p-6 {
  padding: var(--spacing-6);
}

.u-pt-0 {
  padding-top: 0;
}

.u-pt-1 {
  padding-top: var(--spacing-1);
}

.u-pt-2 {
  padding-top: var(--spacing-2);
}

.u-pt-3 {
  padding-top: var(--spacing-3);
}

.u-pt-4 {
  padding-top: var(--spacing-4);
}

.u-pt-5 {
  padding-top: var(--spacing-5);
}

.u-pt-6 {
  padding-top: var(--spacing-6);
}

.u-pb-0 {
  padding-bottom: 0;
}

.u-pb-1 {
  padding-bottom: var(--spacing-1);
}

.u-pb-2 {
  padding-bottom: var(--spacing-2);
}

.u-pb-3 {
  padding-bottom: var(--spacing-3);
}

.u-pb-4 {
  padding-bottom: var(--spacing-4);
}

.u-pb-5 {
  padding-bottom: var(--spacing-5);
}

.u-pb-6 {
  padding-bottom: var(--spacing-6);
}

.u-pl-0 {
  padding-left: 0;
}

.u-pl-1 {
  padding-left: var(--spacing-1);
}

.u-pl-2 {
  padding-left: var(--spacing-2);
}

.u-pl-3 {
  padding-left: var(--spacing-3);
}

.u-pl-4 {
  padding-left: var(--spacing-4);
}

.u-pl-5 {
  padding-left: var(--spacing-5);
}

.u-pl-6 {
  padding-left: var(--spacing-6);
}

.u-pr-0 {
  padding-right: 0;
}

.u-pr-1 {
  padding-right: var(--spacing-1);
}

.u-pr-2 {
  padding-right: var(--spacing-2);
}

.u-pr-3 {
  padding-right: var(--spacing-3);
}

.u-pr-4 {
  padding-right: var(--spacing-4);
}

.u-pr-5 {
  padding-right: var(--spacing-5);
}

.u-pr-6 {
  padding-right: var(--spacing-6);
}

.u-px-1 {
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}

.u-px-2 {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}

.u-px-3 {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}

.u-px-4 {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.u-px-5 {
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
}

.u-px-6 {
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}

.u-py-1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}

.u-py-2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.u-py-3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}

.u-py-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

.u-py-5 {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}

.u-py-6 {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}

/* Gap utilities */
.gap-2 {
  gap: var(--spacing-2);
}

.gap-4 {
  gap: var(--spacing-4);
}

.gap-6 {
  gap: var(--spacing-6);
}

.gap-8 {
  gap: var(--spacing-8);
}

/* Button system */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-weight: var(--font-medium);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: var(--text-sm);
}

.btn-md {
  padding: 0.5rem 0.75rem;
  font-size: var(--text-base);
}

.btn-lg {
  padding: 0.75rem 1rem;
  font-size: var(--text-lg);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

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

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

.btn-success {
  background: var(--color-success);
  color: var(--color-white);
  border-color: var(--color-success);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
}

.btn-outline-primary {
  background: transparent;
  color: white;
  border-color: white;
}

.btn-outline-primary:hover {
  background: rgb(0, 98, 255) !important;
}

/* Table styles */
.table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.table th,
.table td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-3) var(--spacing-4);
}

.table th {
  background: var(--color-gray-50);
  font-weight: var(--font-semibold);
  color: var(--color-gray-700);
  text-align: left;
}

.table td {
  color: var(--color-gray-900);
}

.table tbody tr:hover {
  background-color: var(--color-gray-100);
  transition: background-color var(--transition-fast);
}

/* Pipeline & lead-card */
.pipeline-column {
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  border: 1px dashed var(--color-border);
}

.lead-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.lead-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Status: keep tints on badges/labels and use border-left on cards for visual cue */
.badge.status-new {
  background: rgba(6, 182, 212, 0.12);
  color: var(--color-info);
}

.lead-card.status-new {
  border-left: 4px solid var(--color-info);
}

.badge.status-contacted {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning);
}

.lead-card.status-contacted {
  border-left: 4px solid var(--color-warning);
}

.badge.status-follow_up {
  background: rgba(156, 163, 175, 0.12);
  color: var(--color-gray-400);
}

.lead-card.status-follow_up {
  border-left: 4px solid var(--color-gray-400);
}

.badge.status-negotiation {
  background: rgba(59, 130, 246, 0.12);
  color: var(--color-primary);
}

.lead-card.status-negotiation {
  border-left: 4px solid var(--color-primary);
}

.badge.status-closed_won {
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-success);
}

.lead-card.status-closed_won {
  border-left: 4px solid var(--color-success);
}

.badge.status-closed_lost {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger);
}

.lead-card.status-closed_lost {
  border-left: 4px solid var(--color-danger);
}

/* Form control styles */
.form-label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
}

.form-control {
  width: 100%;
  padding: var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  background: var(--color-white);
}

.form-select{
  background: transparent;
  border-color: var(--color-border);
  color: white;
}

.form-control:focus {
  border-color: var(--color-primary);
  color: white;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
  background: transparent !important;
  outline: none;
}

.form-control:focus:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  background: transparent !important;
}

/* Badges */
.badge {
  display: inline-block;
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
  padding: 0.15rem 0.5rem;
  font-size: var(--text-sm);
}

.badge-primary {
  background: rgba(59, 130, 246, 0.12);
  color: var(--color-primary);
}

.badge-success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-success);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning);
}

.badge-danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger);
}

.badge-info {
  background: rgba(6, 182, 212, 0.12);
  color: var(--color-info);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-200);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-400);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-600);
}

/* Layout utilities */
.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.inline {
  display: inline !important;
}

/* Responsive breakpoints and responsive utility variants */
@media (max-width: 640px) {

  /* sm: prefix (classes written as 'sm:text-sm' in markup, escaped in CSS as .sm\:text-sm) */
  .sm\:text-sm {
    font-size: var(--text-sm) !important;
  }

  .sm\:text-base {
    font-size: var(--text-base) !important;
  }

  .sm\:text-lg {
    font-size: var(--text-lg) !important;
  }

  .sm\:mt-1 {
    margin-top: var(--spacing-1) !important;
  }

  .sm\:mt-2 {
    margin-top: var(--spacing-2) !important;
  }

  .sm\:mt-3 {
    margin-top: var(--spacing-3) !important;
  }

  .sm\:mt-4 {
    margin-top: var(--spacing-4) !important;
  }

  .sm\:mt-6 {
    margin-top: var(--spacing-6) !important;
  }

  .sm\:mb-1 {
    margin-bottom: var(--spacing-1) !important;
  }

  .sm\:mb-2 {
    margin-bottom: var(--spacing-2) !important;
  }

  .sm\:p-2 {
    padding: var(--spacing-2) !important;
  }

  .sm\:p-4 {
    padding: var(--spacing-4) !important;
  }

  .pipeline-column {
    padding: var(--spacing-3);
  }
}

@media (max-width: 768px) {

  /* md: prefix */
  .md\:text-base {
    font-size: var(--text-base) !important;
  }

  .md\:text-lg {
    font-size: var(--text-lg) !important;
  }

  .md\:mt-1 {
    margin-top: var(--spacing-1) !important;
  }

  .md\:mt-2 {
    margin-top: var(--spacing-2) !important;
  }

  .md\:mt-3 {
    margin-top: var(--spacing-3) !important;
  }

  .md\:mt-4 {
    margin-top: var(--spacing-4) !important;
  }

  .md\:mt-6 {
    margin-top: var(--spacing-6) !important;
  }

  .card-body {
    padding: var(--spacing-4);
  }
}

@media (min-width: 1024px) {

  /* lg: prefix (desktop and up) */
  .lg\:text-lg {
    font-size: var(--text-lg) !important;
  }

  .lg\:text-xl {
    font-size: var(--text-xl) !important;
  }

  .lg\:mt-2 {
    margin-top: var(--spacing-2) !important;
  }

  .lg\:mt-4 {
    margin-top: var(--spacing-4) !important;
  }

  .lg\:mt-6 {
    margin-top: var(--spacing-6) !important;
  }

  .container-lg {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Keep timeline and DnD styles but map to tokens */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline .timeline-item {
  padding: var(--spacing-3) 0;
  border-left: 2px solid var(--color-border);
  margin-left: var(--spacing-4);
}

/* Loading spinner */
.spinner {
  width: 2rem;
  height: 2rem;
  border: 4px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Drag and drop hints */
.dragging {
  opacity: 0.6;
}

.drop-target {
  outline: 2px dashed var(--color-primary);
}

/* Dark mode support - FORCED ALWAYS ON */
:root {
  --color-bg: #0F172A;
  /* very dark */
  --color-surface: #0B1220;
  --color-border: #334155;
  --color-gray-50: #0B1220;
  --color-gray-100: #0F172A;
  --color-gray-200: #1F2A37;
  --color-gray-300: #273244;
  --color-gray-400: #334155;
  --color-gray-500: #475569;
  --color-gray-600: #64748B;
  --color-gray-700: #94A3B8;
  --color-gray-800: #CBD5E1;
  --color-gray-900: #E6EEF8;
}

body {
  background: var(--color-bg);
  color: var(--color-gray-900);
}

.card {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: none;
}

.table th {
  background: transparent;
}

.form-control {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-gray-900);
}

/* Pipeline & Tasks Pages Styles */

/* Pipeline Board Layout */
.pipeline-board {
  display: flex;
  gap: var(--spacing-4);
  white-space: nowrap;
  overflow-x: auto;
  padding-bottom: var(--spacing-4);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.pipeline-board::-webkit-scrollbar {
  height: 8px;
}

.pipeline-board::-webkit-scrollbar-thumb {
  background: var(--color-gray-400);
  border-radius: var(--radius-full);
}

/* Enhanced Kanban Column Styles */
.kanban-column {
  min-width: 280px;
  max-width: 320px;
  flex-shrink: 0;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4);
  scroll-snap-align: start;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.kanban-column:hover {
  box-shadow: var(--shadow-md);
}

.kanban-column-drag-over {
  background: rgba(59, 130, 246, 0.05);
  border-color: var(--color-primary);
  border-style: solid;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
  transform: scale(1.02);
}

/* Kanban Column Header */
.kanban-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  border-bottom: 2px solid var(--color-border);
}

.kanban-column-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.kanban-column-title h6 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
}

.kanban-count {
  font-size: var(--text-sm);
  padding: 0.25rem 0.5rem;
}

/* Status Indicators */
.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.status-indicator-new {
  background: var(--color-info);
}

.status-indicator-contacted {
  background: var(--color-warning);
}

.status-indicator-follow_up {
  background: var(--color-gray-400);
}

.status-indicator-negotiation {
  background: var(--color-primary);
}

.status-indicator-closed_won {
  background: var(--color-success);
}

.status-indicator-closed_lost {
  background: var(--color-danger);
}

/* Kanban Cards Container */
.kanban-cards-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  min-height: 200px;
  max-height: calc(100vh - 350px);
  overflow-y: auto;
  padding: var(--spacing-2);
  margin: 0 calc(-1 * var(--spacing-2));
}

/* Enhanced Kanban Card Styles */
.kanban-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  cursor: grab;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card-dragging {
  opacity: 0.5;
  transform: rotate(3deg) scale(1.05);
  box-shadow: var(--shadow-xl);
  cursor: grabbing;
  z-index: 1000;
}

/* Kanban Card Components */
.kanban-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-3);
}

.kanban-card-title h6 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
  line-height: var(--leading-tight);
}

.kanban-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

.kanban-card-budget {
  /* display: flex; */
  align-items: center;
  gap: var(--spacing-2);
}

.kanban-card-footer {
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border);
}

/* Priority Badge */
.priority-badge {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.priority-high {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

.priority-medium {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.priority-low {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

/* Kanban View Button */
.btn-kanban-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-kanban-view:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

/* Kanban Empty State */
.kanban-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-4);
  color: var(--color-gray-400);
  text-align: center;
}

.kanban-empty-state i {
  font-size: 2rem;
  margin-bottom: var(--spacing-2);
}

/* Drag Placeholder */
.drag-placeholder {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--spacing-4) var(--spacing-6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  z-index: 9999;
  align-items: center;
  gap: var(--spacing-3);
  font-weight: var(--font-semibold);
  pointer-events: none;
}

/* Body Dragging State */
.is-dragging {
  cursor: grabbing !important;
}

.is-dragging * {
  cursor: grabbing !important;
}

/* Task Stats Grid */
.task-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-8);
}

/* Task Stat Card */
.task-stat-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

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

.task-stat-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  font-size: var(--text-2xl);
  flex-shrink: 0;
}

.task-stat-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.task-stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  line-height: 1;
}

.task-stat-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Task Stat Card Variants */
.task-stat-overdue {
  border-left: 4px solid var(--color-danger);
}

.task-stat-overdue .task-stat-icon {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

.task-stat-today {
  border-left: 4px solid var(--color-warning);
}

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

.task-stat-upcoming {
  border-left: 4px solid var(--color-info);
}

.task-stat-upcoming .task-stat-icon {
  background: rgba(6, 182, 212, 0.1);
  color: var(--color-info);
}

.task-stat-completed {
  border-left: 4px solid var(--color-success);
}

.task-stat-completed .task-stat-icon {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

/* Task Section Card */
.task-section-card {
  margin-bottom: var(--spacing-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Task Section Header */
.task-section-header {
  padding: var(--spacing-5);
  background: var(--color-gray-50);
  border-bottom: 2px solid var(--color-border);
}

.task-section-header h5 {
  margin: 0;
  display: flex;
  align-items: center;
}

/* Task Section Header Variants */
.task-section-overdue {
  background: rgba(239, 68, 68, 0.05);
  border-bottom-color: var(--color-danger);
}

.task-section-today {
  background: rgba(245, 158, 11, 0.05);
  border-bottom-color: var(--color-warning);
}

.task-section-upcoming {
  background: rgba(6, 182, 212, 0.05);
  border-bottom-color: var(--color-info);
}

.task-section-completed {
  background: rgba(16, 185, 129, 0.05);
  border-bottom-color: var(--color-success);
}

/* Task Card */
.task-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-fast);
  background: var(--color-white);
}

.task-card:last-child {
  border-bottom: none;
}

.task-card:hover {
  background: var(--color-gray-50);
  padding-left: var(--spacing-6);
}

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

.task-card-title {
  margin: 0 0 var(--spacing-2) 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
}

.task-card-description {
  margin: 0 0 var(--spacing-2) 0;
  line-height: var(--leading-relaxed);
}

.task-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

.task-meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.task-meta-overdue {
  color: var(--color-danger);
  font-weight: var(--font-semibold);
}

.task-card-actions {
  flex-shrink: 0;
  margin-left: var(--spacing-4);
}

.task-card-status {
  flex-shrink: 0;
  margin-left: var(--spacing-4);
}

/* Task Card Variants */
.task-card-overdue {
  border-left: 4px solid var(--color-danger);
}

.task-card-today {
  border-left: 4px solid var(--color-warning);
}

.task-card-upcoming {
  border-left: 4px solid var(--color-info);
}

.task-card-completed {
  opacity: 0.7;
  border-left: 4px solid var(--color-success);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .pipeline-board {
    gap: var(--spacing-3);
  }

  .kanban-column {
    min-width: 260px;
  }

  .task-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .task-card {
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .task-card-actions {
    margin-left: 0;
    width: 100%;
  }

  .task-card-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .task-stats-grid {
    grid-template-columns: 1fr;
  }

  .kanban-column {
    min-width: 240px;
  }

  .task-stat-card {
    padding: var(--spacing-4);
  }

  .task-stat-icon {
    width: 48px;
    height: 48px;
    font-size: var(--text-xl);
  }
}

/* Dark Mode Adjustments - FORCED ALWAYS ON */
.kanban-column,
.kanban-card,
.task-stat-card,
.task-section-card,
.task-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.kanban-column-drag-over {
  background: rgba(59, 130, 246, 0.08);
}

.task-section-header {
  background: var(--color-gray-100);
}

.btn-kanban-view {
  background: var(--color-gray-100);
}

/* End of file */

/* ======================================================================
   Sidebar + Header Layout Styles
   ====================================================================== */

/* Body layout adjustments */
body {
  overflow-x: hidden;
  transition: margin-left var(--transition-base);
}

/* Sidebar base */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: width var(--transition-base), transform var(--transition-base);
  overflow-x: hidden;
  overflow-y: auto;
  will-change: transform;
}

.sidebar-header {
  padding: var(--spacing-6) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.sidebar-header i {
  font-size: var(--text-2xl);
  color: var(--color-primary);
}

.sidebar-header .brand-text {
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  white-space: nowrap;
  transition: opacity var(--transition-base);
}

.sidebar-nav {
  flex: 1;
  padding: var(--spacing-4) 0;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  margin-bottom: var(--spacing-1);
}

.sidebar-menu a {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--color-gray-700);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  border-radius: var(--radius-md);
  margin: 0 var(--spacing-2);
}

.sidebar-menu a:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

.sidebar-menu a.active {
  background-color: rgba(59, 130, 246, 0.08);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
  border-left: 3px solid var(--color-primary);
}

.sidebar-menu a i {
  font-size: var(--text-lg);
  width: 24px;
  text-align: center;
}

.menu-text {
  white-space: nowrap;
  transition: opacity var(--transition-base);
}

.sidebar-footer {
  padding: var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

.btn-suggestion {
  width: 100%;
  background: var(--color-gray-100);
  border: 1px solid var(--color-border);
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  justify-content: center;
}

.btn-suggestion:hover {
  background: var(--color-gray-200);
}

/* Collapsed state */
.sidebar-collapsed .app-sidebar {
  width: 80px;
}

.sidebar-collapsed .menu-text,
.sidebar-collapsed .brand-text {
  opacity: 0;
  visibility: hidden;
}

.sidebar-collapsed .sidebar-menu a {
  text-align: center;
}

.sidebar-collapsed .sidebar-menu a i {
  width: auto;
  margin: 0 auto;
}

.sidebar-collapsed .btn-suggestion span {
  display: none;
}

.sidebar-collapsed .developer-credit {
  display: none;
}

/* Header */
.app-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 260px;
  height: 64px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 0 var(--spacing-6);
  transition: left var(--transition-base);
}

.sidebar-collapsed .app-header {
  left: 80px;
}

.sidebar-toggle {
  background: transparent;
  border: none;
  font-size: var(--text-xl);
  color: var(--color-gray-700);
  cursor: pointer;
  padding: var(--spacing-2);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sidebar-toggle:hover {
  background-color: var(--color-gray-100);
  transform: scale(1.05);
}

.header-search {
  flex: 1;
  max-width: 500px;
  margin-right: auto;
}

.header-search .form-control {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-gray-50);
  transition: all var(--transition-base);
}

.header-search .form-control:focus {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

  .header-search {
    height: 40px;
  }

  .header-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    font-size: var(--text-base);
    pointer-events: none;
    line-height: 1;
  }

  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-left: auto;
  height: 40px;
}

.header-action {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: var(--text-xl);
  color: var(--color-gray-700);
  cursor: pointer;
  border-radius: var(--radius-md);
  position: relative;
  transition: all var(--transition-base);
  line-height: 1;
}

.header-action:hover {
  background-color: var(--color-gray-100);
  transform: translateY(-1px);
}

.header-action:active {
  transform: translateY(0);
}

.header-action i {
  line-height: 1;
}

.notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-danger);
  color: var(--color-white);
  font-size: var(--text-xs);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .notification-badge {
    min-width: 14px;
    height: 14px;
    font-size: 10px;
    padding: 1px 4px;
  }
}


.bg-white {
  margin-bottom: 20px;
  width: 100%;
  background: var(--color-bg) !important;
}

.mb-1 {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.875rem;
}

.header-user {
  height: 40px;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  background: transparent;
  border: 1px solid var(--color-border);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
  max-width: 200px;
  /* Limit width for long usernames */
}

.header-user:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.header-user:active {
  transform: translateY(0);
}

.header-user i {
  font-size: var(--text-xl);
  color: var(--color-primary);
  line-height: 1;
  flex-shrink: 0;
  /* Prevent icon from shrinking */
}

.header-user .user-name {
  font-weight: var(--font-medium);
  color: var(--color-gray-900);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  /* Allow text to truncate while keeping icon visible */
}
.form-control[readonly]{
  background: transparent;
}
.app-content {
  position: absolute;
  top: 64px;
  left: 260px;
  right: 0;
  bottom: 0;
  transition: left var(--transition-base);
  background: var(--color-bg);
  padding-top: 20px;
  overflow-y: auto;
  display: none;
}

.sidebar-collapsed .app-content {
  left: 80px;
  display: none;
}

/* Sidebar backdrop for mobile */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  transition: opacity var(--transition-base);
}

/* Mobile responsive behavior */
@media (max-width: 768px) {
  .app-sidebar {
    transform: translateX(-100%);
    width: 260px;
    box-shadow: var(--shadow-xl);
  }

  .app-header {
    left: 0;
    padding: 0 var(--spacing-3);
  }

  .app-content {
    left: 0;
    display: none !important;
  }

  .sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  .sidebar-open .sidebar-backdrop {
    display: block;
  }

  .header-search {
    display: none;
  }

  .header-actions {
    gap: var(--spacing-2);
  }

  .header-user {
    padding: var(--spacing-2);
  }

  .header-user .user-name {
    display: none;
  }

  .sidebar-toggle {
    width: 36px;
    height: 36px;
  }

  .header-action {
    width: 36px;
    height: 36px;
  }
}

/* Tablet responsive behavior */
@media (max-width: 1024px) {
  .header-search {
    max-width: 300px;
  }

  .header-actions {
    gap: var(--spacing-2);
  }

  .header-user .user-name {
    font-size: var(--text-sm);
  }

  .app-header {
    padding: 0 var(--spacing-4);
  }
}

@media (max-width: 1024px) {
  .header-search {
    max-width: 300px;
  }
}

/* Dark mode adjustments - FORCED ALWAYS ON */
.app-sidebar,
.app-header {
  background: var(--color-surface);
}

.sidebar-menu a {
  color: #e5e7eb;
}

.sidebar-menu a:hover {
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
}

.menu-text {
  color: #e5e7eb;
}

.sidebar-toggle {
  color: #ffffff;
}

.header-user .user-name {
  color: #ffffff;
}

.header-action {
  color: #ffffff;
}

.header-action i {
  color: #ffffff;
}

.header-search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.header-user i {
  color: var(--color-primary-light);
}

.header-search .search-icon {
  color: rgba(255, 255, 255, 0.6);
}

.sidebar-header {
  color: #ffffff;
}

.sidebar-header i {
  color: var(--color-primary-light);
}

.btn-suggestion {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-suggestion:hover {
  background: rgba(255, 255, 255, 0.15);
}

.app-content {
  background: var(--color-bg);
}

.header-search .form-control {
  background: var(--color-gray-100);
}

/* Accessibility: focus styles */
.sidebar-menu a:focus,
.sidebar-toggle:focus,
.header-action:focus,
.header-user:focus,
.btn-suggestion:focus {
  outline: 3px solid rgba(59, 130, 246, 0.12);
  outline-offset: 2px;
}

/* end Sidebar + Header Layout Styles */

/* ======================================================================
   Leads Management Pages Styles
   (leads.php, lead_form.php, lead_detail.php)
   ====================================================================== */

/* Page header */
.page-header {
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-4) 0 var(--spacing-4) 0;
  border-bottom: 1px solid var(--color-border);
  display: block;
  visibility: visible;
  position: relative;
  z-index: 10;
}

.page-header h2 {
  margin: 0;
}

.page-header p {
  margin: 0;
  color: var(--color-gray-600);
  font-size: var(--text-base);
}

.page-header .d-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  align-items: flex-start;
}

/* Mobile responsive adjustments for page header */
@media (max-width: 768px) {
  .page-header {
    padding: var(--spacing-3) 0;
    margin-bottom: var(--spacing-4);
  }

  .page-header .d-flex {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3);
  }

  .page-header h2 {
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
  }

  .page-header .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: var(--spacing-2) 0;
  }

  .page-header h2 {
    font-size: var(--text-lg);
  }

  .page-header p {
    font-size: var(--text-sm);
  }
}

/* Filter card */
.filter-card {
  margin-bottom: var(--spacing-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.filter-card .card-body {
  padding: var(--spacing-6);
}

.filter-form-container {
  padding: var(--spacing-6);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.filter-field {
  display: block;
}

.filter-actions {
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

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

/* Search bar */
.search-bar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.search-bar {
  position: relative;
  flex: 1;
  max-width: 500px;
}

.search-bar i {
  position: absolute;
  left: var(--spacing-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray-500);
}

.search-bar input {
  padding-left: var(--spacing-10);
  width: 100%;
}

.results-count {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

@media (max-width: 768px) {
  .search-bar-container {
    flex-direction: column;
    align-items: stretch;
  }

  .search-bar {
    max-width: 100%;
  }
}

/* Modern table */
.table-modern {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-modern thead {
  background: var(--color-gray-50);
  border-bottom: 2px solid var(--color-border);
}

.table-modern th {
  padding: var(--spacing-4);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: white;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table-modern td {
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-gray-900);
  vertical-align: middle;
}

.table-row-hover {
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.table-row-hover:hover {
  background-color: var(--color-gray-50);
}

.lead-id-badge {
  background: rgba(99, 102, 241, 0.08);
  color: var(--color-primary);
  padding: 0.25rem 0.5rem;
  display: flex;
  flex-direction: row;
  min-width: 80px;
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
}

.lead-name-cell strong {
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
}

.budget-cell {
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
}

.empty-state-cell {
  padding: var(--spacing-12) var(--spacing-4);
  text-align: center;
}

/* Icon buttons */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

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

.btn-icon-primary {
  color: var(--color-primary);
  background: rgba(59, 130, 246, 0.06);
}

.btn-icon-primary:hover {
  background: rgba(59, 130, 246, 0.12);
}

.btn-icon-warning {
  color: var(--color-warning);
  background: rgba(245, 158, 11, 0.06);
}

.btn-icon-warning:hover {
  background: rgba(245, 158, 11, 0.12);
}

.btn-icon-danger {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.06);
}

.btn-icon-danger:hover {
  background: rgba(239, 68, 68, 0.12);
}

/* Form cards */
.form-container-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.form-card {
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

.form-card-header {
  background: var(--color-gray-50);
  border-bottom: 2px solid var(--color-border);
  padding: var(--spacing-6);
}

.form-card-body {
  padding: var(--spacing-8);
}

.breadcrumb-nav {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

/* Form sections */
.form-section {
  margin-bottom: var(--spacing-6);
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
}

.form-section:last-child {
  border-bottom: none;
}

.form-section-header {
  margin-bottom: var(--spacing-4);
}

.form-section-header h5 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-1);
}

.form-section-header p {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin: 0;
}

/* Form actions */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-6);
  border-top: 2px solid var(--color-border);
}

@media (max-width: 640px) {
  .form-actions {
    flex-direction: column-reverse;
    gap: var(--spacing-3);
  }

  .form-actions .btn {
    width: 100%;
  }
}

/* Lead detail grid */
.lead-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-6);
}

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

/* Lead info card */
.lead-info-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.lead-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  padding: var(--spacing-6);
}

.lead-header-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.lead-header-actions {
  display: flex;
  gap: var(--spacing-2);
}

.lead-info-grid {
  padding: var(--spacing-6);
}

/* Info sections */
.info-section {
  margin-bottom: var(--spacing-6);
}

.info-section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: 2px solid var(--color-border);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-4);
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.info-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
}

.info-value {
  font-size: var(--text-base);
  color: var(--color-gray-900);
  font-weight: var(--font-medium);
}

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

/* Notes */
.note-item {
  padding: var(--spacing-4);
  border-left: 3px solid var(--color-primary);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-4);
}

.note-text {
  color: var(--color-gray-900);
  line-height: var(--leading-relaxed);
}

.note-meta {
  display: flex;
  gap: var(--spacing-4);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

/* Tasks (lead detail) */
.task-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--spacing-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-3);
  transition: all var(--transition-fast);
}

.task-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.task-title {
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
}

.task-description {
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
}

.task-meta {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-top: var(--spacing-2);
}

/* Status/timeline cards */
.status-update-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.timeline-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.timeline-item {
  display: flex;
  gap: var(--spacing-3);
  align-items: flex-start;
  margin-bottom: var(--spacing-3);
}

.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  margin-top: 6px;
}

/* Alerts modernized */
.alert-modern {
  border-left: 4px solid;
  border-radius: var(--radius-lg);
  padding: var(--spacing-4) var(--spacing-5);
  box-shadow: var(--shadow-sm);
}

/* Small utilities */
.gap-2 {
  gap: var(--spacing-2);
}

.gap-3 {
  gap: var(--spacing-3);
}

.gap-4 {
  gap: var(--spacing-4);
}

/* Dark mode tweaks - FORCED ALWAYS ON */
.filter-card,
.form-card,
.lead-info-card,
.note-item,
.task-item {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.table-modern thead {
  background: var(--color-gray-100);
}

/* End Leads Management Pages Styles */

/* ======================================================================
   Dashboard-specific styles (stat cards, chart wrapper, tasks, recent leads)
   ====================================================================== */

.app-content-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: var(--spacing-4);
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
  padding-bottom: var(--spacing-12);
}

.app-content-inner>*:first-child {
  margin-top: 80px !important;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-4);
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  min-height: 120px;
  max-height: 120px;
}

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

.stat-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-50);
  color: var(--color-primary);
  font-size: 1.25rem;
}

.stat-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}

.stat-card-label {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

.stat-card-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
}

.stat-card-trend {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

.stat-card-primary {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), rgba(59, 130, 246, 0.03));
  border-left: 4px solid var(--color-primary);
}

.stat-card-primary .stat-card-icon {
  background: rgba(59, 130, 246, 0.12);
  color: var(--color-primary-dark);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--spacing-4);
  align-items: start;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .stat-card-content {
  display: flex;
  flex-direction: column;
  align-items: end;
}
}

.chart-wrapper {
  height: 260px;
  position: relative;
}

.chart-container {
  padding: 0;
}



.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
}

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

.task-title {
  font-weight: var(--font-medium);
  color: var(--color-gray-900);
}

.task-meta {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

.task-date .badge {
  font-size: var(--text-sm);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
  color: var(--color-gray-500);
}

.alert-modern {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-4);
}

.alert-modern i {
  font-size: 1.15rem;
}

.alert-success {
  background: rgba(16, 185, 129, 0.08);
  color: var(--color-success);
  border: 1px solid rgba(16, 185, 129, 0.12);
}

.alert-danger {
  background: rgba(239, 68, 68, 0.06);
  color: var(--color-danger);
  border: 1px solid rgba(239, 68, 68, 0.08);
}

/* Recent leads compact list tweaks */
.table-responsive {
  overflow: auto;
}

.table th,
.table td {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .stat-card-value {
    font-size: var(--text-xl);
  }

  .stat-card-icon {
    width: 44px;
    height: 44px;
  }
}

/* Dashboard header responsive styles */
.dashboard-header {
  display: block;
  visibility: visible;
  position: relative;
  z-index: 10;
  margin-bottom: var(--spacing-6);
}

.dashboard-header h2 {
  margin: 0;
}

.dashboard-header p {
  margin: 0;
  color: var(--color-gray-600);
}

/* Mobile responsive adjustments for dashboard header */
@media (max-width: 768px) {
  .dashboard-header {
    padding: var(--spacing-3) 0;
    margin-bottom: var(--spacing-4);
  }

  .dashboard-header h2 {
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
  }
}

@media (max-width: 480px) {
  .dashboard-header {
    padding: var(--spacing-2) 0;
  }

  .dashboard-header h2 {
    font-size: var(--text-lg);
  }

  .dashboard-header p {
    font-size: var(--text-sm);
  }
}

/* End dashboard-specific styles */

/* Notification Styles (moved from pipeline.php) */
.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 9999;
}

.notification.show {
  transform: translateY(0);
  opacity: 1;
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-gray-900);
}

.notification-success {
  border-left: 4px solid var(--color-success);
}

.notification-success i {
  color: var(--color-success);
}

.notification-error {
  border-left: 4px solid var(--color-danger);
}

.notification-error i {
  color: var(--color-danger);
}

/* Notification dark mode - FORCED ALWAYS ON */
.notification {
  background: var(--color-surface);
  color: var(--color-white);
}

.notification-content {
  color: var(--color-white);
}

/* ======================================================================
   Reports & Analytics Page Styles (appended per verification comments)
   ====================================================================== */

.reports-header-content {
  flex: 1;
}

.reports-actions {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
}

.date-filter-card {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  background: var(--color-white);
}

.date-filter-card .card-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: none;
}

.date-filter-card .card-header h5 {
  color: var(--color-white);
  margin: 0;
}

.date-filter-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.date-filter-inputs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

.date-filter-actions {
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
  .date-filter-inputs {
    grid-template-columns: 1fr;
  }

  .date-filter-actions {
    flex-direction: column;
  }

  .date-filter-actions .btn {
    width: 100%;
  }
}

.reports-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-8);
}

@media (max-width: 768px) {
  .reports-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .reports-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* Stat card variants */
.stat-card-success {
  border-left: 4px solid var(--color-success);
}

.stat-card-success .stat-card-icon {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

.stat-card-revenue {
  border-left: 4px solid var(--color-info);
}

.stat-card-revenue .stat-card-icon {
  background: rgba(6, 182, 212, 0.1);
  color: var(--color-info);
}

.stat-card-pipeline {
  border-left: 4px solid var(--color-warning);
}

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

.stat-card-info {
  border-left: 4px solid var(--color-primary);
}

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

.reports-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
}

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

.chart-container {
  padding: var(--spacing-6);
  min-height: 350px;
}

.chart-wrapper {
  position: relative;
  height: 350px;
  width: 100%;
}

.chart-wrapper canvas {
  max-width: 100%;
  height: auto !important;
}

@media (max-width: 768px) {
  .chart-container {
    padding: var(--spacing-4);
    min-height: 300px;
  }

  .chart-wrapper {
    height: 300px;
  }
}

.performance-table-card {
  margin-bottom: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.rep-name-cell {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.win-rate-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  min-width: 120px;
}

.win-rate-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.2) 100%);
  border-radius: var(--radius-sm);
  transition: width var(--transition-base);
  z-index: 0;
}

.win-rate-text {
  position: relative;
  z-index: 1;
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
}

.revenue-cell {
  text-align: right;
  font-size: var(--text-lg);
}

.reports-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

@media (max-width: 768px) {
  .reports-details-grid {
    grid-template-columns: 1fr;
  }
}

.stats-breakdown-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.stats-breakdown-card:hover {
  box-shadow: var(--shadow-md);
}

.table-breakdown {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.table-breakdown .breakdown-row {
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.table-breakdown .breakdown-row:last-child {
  border-bottom: none;
}

.table-breakdown .breakdown-row:hover {
  background-color: var(--color-gray-50);
}

.table-breakdown td {
  padding: var(--spacing-3) var(--spacing-4);
  vertical-align: middle;
}

.table-breakdown .status-indicator {
  display: inline-block;
  margin-right: var(--spacing-2);
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
}

/* Status indicator color modifiers */
.status-indicator-new {
  background: var(--color-info);
}

.status-indicator-contacted {
  background: var(--color-warning);
}

.status-indicator-follow_up {
  background: var(--color-gray-400);
}

.status-indicator-negotiation {
  background: var(--color-primary);
}

.status-indicator-closed_won {
  background: var(--color-success);
}

.status-indicator-closed_lost {
  background: var(--color-danger);
}

@media print {
  .app-sidebar {
    display: none;
  }

  .app-header {
    display: none;
  }

  .app-content {
    margin-left: 0;
    margin-top: 0;
  }

  .reports-actions {
    display: none;
  }

  body {
    background: white;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .reports-metrics-grid,
  .reports-charts-grid,
  .performance-table-card {
    page-break-inside: avoid;
  }
}

/* Reports dark mode - FORCED ALWAYS ON */
.date-filter-card,
.performance-table-card,
.stats-breakdown-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.date-filter-card .card-header {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}

.win-rate-bar {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.25) 100%);
}

.breakdown-row:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Accessibility focus-visible */
.reports-actions .btn:focus-visible,
.date-filter-actions .btn:focus-visible,
.stat-card:focus-visible,
.table-row-hover:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* End Reports & Analytics Page Styles */

/* ======================================================================
     Admin & Profile Pages Styles
     ====================================================================== */

/* Admin Section Grid */
.admin-section-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
}

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

/* Admin Table Card */
.admin-table-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Admin Form Card */
.admin-form-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: sticky;
  top: 80px;
}

.admin-form-body {
  padding: var(--spacing-6);
}

/* User Name Cell */
.user-name-cell {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

/* Admin Management Grid */
.admin-management-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
}

@media (max-width: 768px) {
  .admin-management-grid {
    grid-template-columns: 1fr;
  }
}

/* Admin Management Card */
.admin-management-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.admin-management-card:hover {
  box-shadow: var(--shadow-md);
}

/* Admin Inline Form */
.admin-inline-form {
  margin-bottom: var(--spacing-4);
}

.modern-input-group {
  display: flex;
  gap: var(--spacing-2);
}

.modern-input-group .form-control {
  flex: 1;
}

.modern-input-group .btn {
  flex-shrink: 0;
}

/* Table Compact Variant */
.table-compact {
  font-size: var(--text-sm);
}

.table-compact th,
.table-compact td {
  padding: var(--spacing-3);
}

/* Admin Suggestions Card */
.admin-suggestions-card {
  margin-bottom: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Admin Activity Card */
.admin-activity-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Modern Modal Styles */
.modern-modal {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.modern-modal-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  padding: var(--spacing-5) var(--spacing-6);
  border-bottom: none;
}

.modern-modal-header .modal-title {
  color: var(--color-white);
  font-weight: var(--font-semibold);
}

.modern-modal-header .btn-close {
  filter: brightness(0) invert(1);
}

.modern-modal-body {
  padding: var(--spacing-6);
}

.modern-modal-footer {
  padding: var(--spacing-5) var(--spacing-6);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-border);
}

/* Profile Container Wrapper */
.profile-container-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

/* Profile Card */
.profile-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.profile-card-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  padding: var(--spacing-6);
  border-bottom: none;
}

.profile-card-header h4 {
  color: var(--color-white);
  margin: 0;
}

.profile-card-body {
  padding: var(--spacing-8);
}

/* Profile Layout Grid */
.profile-layout-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--spacing-8);
}

@media (max-width: 768px) {
  .profile-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* Profile Sidebar */
.profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* Profile Avatar Section */
.profile-avatar-section {
  text-align: center;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
}

.profile-avatar i {
  font-size: 4rem;
  color: var(--color-white);
}

.profile-name {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin: 0;
}

/* Profile Info Card */
.profile-info-card {
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
}

.profile-info-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.profile-info-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.profile-info-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-info-value {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-900);
}

/* Profile Form Section */
.profile-form-section {
  display: flex;
  flex-direction: column;
}

.profile-edit-form {
  display: flex;
  flex-direction: column;
}

/* Form Field Wrapper */
.form-field {
  margin-bottom: var(--spacing-4);
}

/* Dark Mode Adjustments - FORCED ALWAYS ON */
.admin-table-card,
.admin-form-card,
.admin-management-card,
.admin-suggestions-card,
.admin-activity-card,
.profile-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.modern-modal {
  background: var(--color-surface);
}

.modern-modal-footer {
  background: var(--color-gray-100);
}

.profile-info-card {
  background: var(--color-gray-100);
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .admin-form-card {
    position: static;
  }

  .profile-avatar {
    width: 100px;
    height: 100px;
  }

  .profile-avatar i {
    font-size: 3rem;
  }
}

/* Admin Tab System */
.admin-tab-panel {
  display: none;
}

.admin-tab-panel.active {
  display: block;
}

.admin-tab-button {
  transition: all var(--transition-base);
}

.admin-tab-button.active {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary) !important;
}

.admin-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-3);
}

@media (max-width: 768px) {
  .admin-quick-actions-grid {
    grid-template-columns: 1fr;
  }
}

/* End Admin & Profile Pages Styles */

/* ======================================================================
   Login Page Styles
   ====================================================================== */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  padding: var(--spacing-4);
}

.login-container {
  width: 100%;
  max-width: 450px;
  position: relative;
  z-index: 10;
}

.login-card {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  padding: var(--spacing-8);
  animation: fadeInUp 0.6s ease-out;
  backdrop-filter: blur(10px);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.login-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.login-brand {
  text-align: center;
  margin-bottom: var(--spacing-6);
}

.login-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-full);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
  animation: pulse 2s ease-in-out infinite;
  will-change: transform;
}

.login-logo i {
  font-size: 2.5rem;
  color: var(--color-white);
}

.login-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin: 0;
}

.login-subtitle {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
}

.form-group {
  position: relative;
  margin-bottom: var(--spacing-4);
}

.login-form .form-control {
  padding: var(--spacing-3) var(--spacing-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  transition: all var(--transition-base);
}

.login-form .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
  outline: none;
}

.password-toggle {
  position: absolute;
  right: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--color-gray-500);
  cursor: pointer;
  padding: var(--spacing-2);
  transition: color var(--transition-fast);
}

.password-toggle:hover {
  color: var(--color-primary);
}

.login-submit-btn {
  margin-top: var(--spacing-2);
  font-weight: var(--font-semibold);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: all var(--transition-base);
}

.login-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.login-submit-btn:active {
  transform: translateY(0);
}

.login-footer {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

.theme-toggle {
  position: fixed;
  top: var(--spacing-6);
  right: var(--spacing-6);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  z-index: 1000;
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}

.theme-toggle i {
  font-size: var(--text-xl);
  color: var(--color-gray-700);
  transition: transform var(--transition-base);
}

.login-bg-decoration {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.decoration-circle {
  position: absolute;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  will-change: transform;
}

.decoration-circle-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -150px;
  animation: float 20s ease-in-out infinite;
}

.decoration-circle-2 {
  width: 200px;
  height: 200px;
  bottom: -100px;
  right: -100px;
  animation: float 15s ease-in-out infinite reverse;
}

.decoration-circle-3 {
  width: 150px;
  height: 150px;
  top: 50%;
  right: -75px;
  animation: float 18s ease-in-out infinite;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) translateX(0);
  }

  50% {
    transform: translateY(-20px) translateX(20px);
  }
}

/* Dark mode class-based overrides */
.dark-mode .app-sidebar,
.dark-mode .app-header {
  background: var(--color-surface);
}

.dark-mode .sidebar-menu a {
  color: #e5e7eb;
}

.dark-mode .sidebar-menu a:hover,
.dark .sidebar-menu a:hover {
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
}

.dark-mode .app-sidebar,
.dark-mode .app-header,
.dark .app-sidebar,
.dark .app-header {
  background: var(--color-surface);
}

.dark-mode .sidebar-menu a,
.dark .sidebar-menu a {
  color: #e5e7eb;
}

.dark-mode .menu-text,
.dark .menu-text {
  color: #e5e7eb;
}

.dark-mode .sidebar-toggle,
.dark .sidebar-toggle {
  color: #ffffff;
}

.dark-mode .header-user .user-name,
.dark .header-user .user-name {
  color: #ffffff;
}

.dark-mode .header-action,
.dark .header-action {
  color: #ffffff;
}

.dark-mode .header-action i,
.dark .header-action i {
  color: #ffffff;
}

.dark-mode .header-search .form-control::placeholder,
.dark .header-search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.dark-mode .header-user i,
.dark .header-user i {
  color: var(--color-primary-light);
}

.dark-mode .header-search i,
.dark .header-search i {
  color: rgba(255, 255, 255, 0.6) !important;
}

.dark-mode .sidebar-header,
.dark .sidebar-header {
  color: #ffffff;
}

.dark-mode .sidebar-header i,
.dark .sidebar-header i {
  color: var(--color-primary-light);
}

.dark-mode .btn-suggestion,
.dark .btn-suggestion {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .btn-suggestion:hover,
.dark .btn-suggestion:hover {
  background: rgba(255, 255, 255, 0.15);
}

.dark-mode .app-content,
.dark .app-content {
  background: var(--color-bg);
}

/* Enhanced search input for dark mode */
.dark-mode .header-search .form-control,
.dark .header-search .form-control {
  background: var(--color-gray-100);
  color: #ffffff;
  border-color: var(--color-gray-600);
}

.dark-mode .menu-text {
  color: #e5e7eb;
}

.dark-mode .sidebar-toggle {
  color: #ffffff;
}

.dark-mode .header-user .user-name {
  color: #ffffff;
}

.dark-mode .header-action {
  color: #ffffff;
}

.dark-mode .header-action i {
  color: #ffffff;
}

.dark-mode .header-search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.dark-mode .header-user i {
  color: var(--color-primary-light);
}

.dark-mode .header-search .search-icon {
  color: rgba(255, 255, 255, 0.6);
}

.dark-mode .sidebar-header {
  color: #ffffff;
}

.dark-mode .sidebar-header i {
  color: var(--color-primary-light);
}

.dark-mode .btn-suggestion {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .btn-suggestion:hover {
  background: rgba(255, 255, 255, 0.15);
}

.dark-mode .app-content {
  background: var(--color-bg);
}

/* Enhanced search input for dark mode */
.dark-mode .header-search .form-control {
  background: var(--color-gray-700);
  color: #ffffff;
  border-color: var(--color-gray-600);
}

.dark-mode .login-page {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.dark-mode .login-card {
  background: var(--color-gray-800);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.dark-mode .login-title {
  color: var(--color-white);
}

.dark-mode .login-subtitle {
  color: var(--color-gray-400);
}

.dark-mode .form-label {
  color: var(--color-gray-300);
}

.dark-mode .form-control {
  background: var(--color-gray-700);
  border-color: var(--color-gray-600);
  color: var(--color-white);
}

.dark-mode .form-control:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
}

.dark-mode .login-footer {
  border-top-color: var(--color-gray-700);
}

.dark-mode .theme-toggle {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

.dark-mode .theme-toggle i {
  color: var(--color-gray-300);
}

.dark-mode .decoration-circle {
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 640px) {
  .login-page {
    padding: var(--spacing-3);
  }

  .login-card {
    padding: var(--spacing-6);
  }

  .login-logo {
    width: 64px;
    height: 64px;
  }

  .login-logo i {
    font-size: 2rem;
  }

  .login-title {
    font-size: var(--text-xl);
  }

  .theme-toggle {
    top: var(--spacing-4);
    right: var(--spacing-4);
    width: 40px;
    height: 40px;
  }

  .decoration-circle {
    display: none;
  }
}

/* ======================================================================
   Final Polish & Global Enhancements
   ====================================================================== */

/* Global transitions for interactive elements */
button,
a,
input,
select,
textarea {
  transition: all var(--transition-base);
}

/* focus-visible for accessibility */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Card hover subtle border color change */
.card:hover {
  border-color: var(--color-primary);
}

/* Button interactions */
.btn:active {
  transform: scale(0.98);
}

.btn:focus {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Smooth scroll already present; ensure it's active */
html {
  scroll-behavior: smooth;
}

/* Loading state helper */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

/* Responsive refinements */
@media (max-width: 768px) {
  .app-content-inner {
    padding-top: 0 !important;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    padding-bottom: var(--spacing-8);
  }

  .page-header h2 {
    font-size: var(--text-2xl);
  }

  .stat-card {
    padding: var(--spacing-4);
  }

  .card-header {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .card-body {
    padding: var(--spacing-4);
  }
}

/* Consistent spacing */
.page-header {
  margin-bottom: var(--spacing-6);
}

/* .card+.card {
  margin-top: var(--spacing-6);
} */

/* Visual balance */
.stat-card,
.task-card,
.kanban-card {
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-xl);
}

.btn {
  border-radius: var(--radius-md);
}

.form-control {
  border-radius: var(--radius-md);
}

/* Print styles */
@media print {

  .app-sidebar,
  .app-header,
  .theme-toggle {
    display: none;
  }

  .app-content {
    margin: 0;
  }

  * {
    box-shadow: none !important;
  }

  body {
    color: #000;
  }
}

/* Performance hints */
.login-logo,
.decoration-circle {
  will-change: transform;
}

.login-card,
.stat-card,
.kanban-card {
  contain: layout style paint;
}

/* End Login Page Styles and Final Polish */
/* Search icon class for header search */
.header-search .search-icon {
  color: var(--color-gray-400);
}

/* ======================================================================
   COMPREHENSIVE RESPONSIVE DESIGN SYSTEM
   Mobile-first approach with progressive enhancement
   ====================================================================== */

/* Mobile First - Base styles (320px+) */
@media (max-width: 575px) {

  /* Typography scaling */
  :root {
    --text-xs: 0.7rem;
    --text-sm: 0.8rem;
    --text-base: 0.9rem;
    --text-lg: 1rem;
    --text-xl: 1.1rem;
    --text-2xl: 1.3rem;
    --text-3xl: 1.6rem;
    --text-4xl: 2rem;
  }

  /* Layout adjustments */
  .app-content-inner {
    padding: var(--spacing-2) var(--spacing-3);
    margin-top: 0 !important;
  }

  /* Header responsive */
  .app-header {
    height: 56px;
    padding: 0 var(--spacing-2);
  }

  .sidebar-toggle,
  .header-action {
    width: 32px;
    height: 32px;
    font-size: 23px;
  }

  .header-user {
    padding: var(--spacing-1) var(--spacing-2);
    height: 32px;
  }

  .header-user .user-name {
    display: none;
  }

  /* Admin header responsive */
  .bg-white .container-fluid {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .bg-white .d-flex {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .bg-white h2 {
    font-size: var(--text-lg) !important;
    margin-bottom: var(--spacing-1) !important;
  }

  .bg-white p {
    font-size: var(--text-xs) !important;
  }

  /* Admin navigation buttons */
  .bg-white nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
    width: 100%;
  }

  .admin-tab-button {
    flex: 1;
    min-width: calc(50% - var(--spacing-1));
    padding: var(--spacing-2) var(--spacing-1);
    font-size: var(--text-xs);
  }

  .admin-tab-button i {
    display: none;
  }

  /* Cards responsive */
  .card {
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-3);
  }

  .card-header {
    padding: var(--spacing-3);
  }

  .card-body {
    padding: var(--spacing-3);
  }

  /* Tables responsive */
  .table-responsive {
    font-size: var(--text-xs);
  }

  .table th,
  .table td {
    padding: var(--spacing-2);
    white-space: nowrap;
  }

  /* Forms responsive */
  .form-control {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-sm);
  }

  .btn {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-sm);
  }

  .btn-sm {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--text-xs);
  }

  /* Grid adjustments */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
  }

  .reports-metrics-grid,
  .task-stats-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
  }

  .dashboard-grid,
  .lead-detail-grid,
  .admin-section-grid,
  .reports-charts-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
  }

  /* Stat cards mobile */
  .stat-card {
    padding: var(--spacing-3);
    flex-direction: row;
    max-height: auto;
    min-height: auto;
    justify-content: space-between;
    text-align: center;
    gap: var(--spacing-2);
  }

  .stat-card-icon {
    width: 40px;
    height: 40px;
    font-size: var(--text-lg);
  }

  .stat-card-value {
    font-size: var(--text-xl);
  }

  /* Pipeline mobile */
  .pipeline-board {
    gap: var(--spacing-2);
    padding-bottom: var(--spacing-2);
  }

  .kanban-column {
    min-width: 220px;
    max-width: 240px;
    padding: var(--spacing-2);
  }

  .kanban-card {
    padding: var(--spacing-2);
  }

  .kanban-column-header {
    margin-bottom: var(--spacing-2);
    padding-bottom: var(--spacing-2);
  }

  /* Task cards mobile */
  .task-card {
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
  }

  .task-card-actions {
    margin-left: 0;
    width: 100%;
  }

  .task-card-actions .btn {
    width: 100%;
  }

  /* Modal responsive */
  .modal-dialog {
    margin: var(--spacing-2);
    max-width: calc(100vw - var(--spacing-4));
  }

  .modern-modal-header,
  .modern-modal-body,
  .modern-modal-footer {
    padding: var(--spacing-3);
  }

  /* Filter forms mobile */
  .filter-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
  }

  .filter-actions {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .filter-actions .btn {
    width: 100%;
  }

  /* Search bar mobile */
  .search-bar-container {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .search-bar {
    max-width: 100%;
  }

  /* Form actions mobile */
  .form-actions {
    flex-direction: column-reverse;
    gap: var(--spacing-2);
  }

  .form-actions .btn {
    width: 100%;
  }

  /* Page header mobile */
  .page-header .d-flex {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .page-header .btn {
    width: 100%;
  }

  /* Admin tabs content */
  .admin-tabs-content {
    padding: var(--spacing-2);
  }

  /* Profile mobile */
  .profile-layout-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
  }

  .profile-avatar {
    width: 80px;
    height: 80px;
  }

  .profile-avatar i {
    font-size: 2.5rem;
  }

  /* Chart containers mobile */
  .chart-wrapper {
    height: 250px;
  }

  .chart-container {
    padding: var(--spacing-2);
    min-height: 250px;
  }

  /* Login page mobile */
  .login-card {
    padding: var(--spacing-4);
  }

  .login-logo {
    width: 60px;
    height: 60px;
  }

  .login-logo i {
    font-size: 1.8rem;
  }

  /* Alerts mobile */
  .alert-modern {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-sm);
  }

  /* Badges mobile */
  .badge {
    font-size: var(--text-xs);
    padding: 0.1rem 0.4rem;
  }

  /* Icon buttons mobile */
  .btn-icon {
    width: 28px;
    height: 28px;
    font-size: var(--text-sm);
  }

  /* Utility spacing mobile */
  .u-p-6 {
    padding: var(--spacing-3) !important;
  }

  .u-p-8 {
    padding: var(--spacing-4) !important;
  }

  .u-m-6 {
    margin: var(--spacing-3) !important;
  }

  .u-m-8 {
    margin: var(--spacing-4) !important;
  }
}

/* Small Mobile (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .app-content-inner {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .admin-tab-button {
    min-width: calc(33.333% - var(--spacing-1));
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kanban-column {
    min-width: 240px;
    max-width: 260px;
  }

  .stat-card {
    flex-direction: row;
    text-align: left;
  }

  .chart-wrapper {
    height: 280px;
  }

  .chart-container {
    min-height: 280px;
  }
}

/* Tablet Portrait (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .app-content-inner {
    padding: var(--spacing-4) var(--spacing-5);
  }

  .bg-white .d-flex {
    flex-direction: row;
    align-items: center;
  }

  .admin-tab-button {
    min-width: auto;
    flex: none;
  }

  .admin-tab-button i {
    display: inline;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reports-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .task-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .kanban-column {
    min-width: 260px;
    max-width: 280px;
  }

  .task-card {
    flex-direction: row;
    align-items: flex-start;
  }

  .task-card-actions {
    margin-left: var(--spacing-4);
    width: auto;
  }

  .task-card-actions .btn {
    width: auto;
  }

  .chart-wrapper {
    height: 320px;
  }

  .chart-container {
    min-height: 320px;
  }

  .filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .search-bar-container {
    flex-direction: row;
    align-items: center;
  }

  .form-actions {
    flex-direction: row;
    justify-content: space-between;
  }

  .form-actions .btn {
    width: auto;
  }

  .page-header .d-flex {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .page-header .btn {
    width: auto;
  }
}

/* Tablet Landscape (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .app-content-inner {
    padding: 10px 20px 10px 100px;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .reports-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .task-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: 2fr 1fr;
  }

  .lead-detail-grid {
    grid-template-columns: 1fr;
  }

  .admin-section-grid {
    grid-template-columns: 1fr;
  }

  .reports-charts-grid {
    grid-template-columns: 1fr;
  }

  .filter-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .chart-wrapper {
    height: 350px;
  }

  .chart-container {
    min-height: 350px;
  }
}

/* Desktop (1200px+) */
@media (min-width: 1200px) {
  .app-content-inner {
    padding: var(--spacing-6);
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .reports-metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .task-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: 2fr 1fr;
  }

  .lead-detail-grid {
    grid-template-columns: 2fr 1fr;
  }

  .admin-section-grid {
    grid-template-columns: 2fr 1fr;
  }

  .reports-charts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .chart-wrapper {
    height: 400px;
  }

  .chart-container {
    min-height: 400px;
  }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
  .app-content-inner {
    max-width: 1400px;
    padding: 10px 50px 10px 100px;
  }

  .stats-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .kanban-column {
    min-width: 300px;
    max-width: 320px;
  }
}

/* Ultra-wide screens (1600px+) */
@media (min-width: 1600px) {
  .app-content-inner {
    max-width: 1600px;
  }

  .stats-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
  .app-header {
    height: 48px;
  }

  .app-content {
    top: 48px;
  }

  .sidebar-toggle,
  .header-action,
  .header-user {
    height: 32px;
  }

  .kanban-cards-container {
    max-height: calc(100vh - 200px);
  }

  .chart-wrapper {
    height: 250px;
  }

  .modal-dialog {
    max-height: calc(100vh - var(--spacing-4));
    overflow-y: auto;
  }
}

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

  .login-logo,
  .stat-card-icon,
  .profile-avatar {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .login-logo {
    animation: none;
  }

  .decoration-circle {
    animation: none;
  }
}

/* Print optimizations */
@media print {

  .app-sidebar,
  .app-header,
  .sidebar-backdrop,
  .theme-toggle,
  .admin-tab-button,
  .btn,
  .form-control,
  .modal {
    display: none !important;
  }

  .app-content {
    position: static !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .app-content-inner {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .card,
  .table,
  .stat-card {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }

  .page-header h2 {
    font-size: 18pt !important;
    margin-bottom: 12pt !important;
  }

  .table th,
  .table td {
    font-size: 10pt !important;
    padding: 4pt !important;
  }

  .stats-grid,
  .reports-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12pt !important;
  }

  .chart-wrapper {
    height: 200pt !important;
  }
}

/* Container max-width adjustments for different breakpoints */
.container-responsive {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

@media (min-width: 576px) {
  .container-responsive {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container-responsive {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container-responsive {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container-responsive {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container-responsive {
    max-width: 1320px;
  }
}

/* Flexible utilities for responsive design */
.flex-wrap-mobile {
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .flex-wrap-mobile {
    flex-wrap: nowrap;
  }
}

.text-center-mobile {
  text-align: center;
}

@media (min-width: 768px) {
  .text-center-mobile {
    text-align: left;
  }
}

.w-full-mobile {
  width: 100%;
}

@media (min-width: 768px) {
  .w-full-mobile {
    width: auto;
  }
}

/* Responsive spacing utilities */
@media (max-width: 767px) {
  .gap-mobile-2 {
    gap: var(--spacing-2) !important;
  }

  .gap-mobile-3 {
    gap: var(--spacing-3) !important;
  }

  .p-mobile-2 {
    padding: var(--spacing-2) !important;
  }

  .p-mobile-3 {
    padding: var(--spacing-3) !important;
  }

  .m-mobile-2 {
    margin: var(--spacing-2) !important;
  }

  .m-mobile-3 {
    margin: var(--spacing-3) !important;
  }
}

/* Ensure content doesn't overflow on very small screens */
* {
  max-width: 100%;
  box-sizing: border-box;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Prevent horizontal scroll */
body {
  overflow-x: hidden;
}

/* Responsive table wrapper */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-gray-400);
  border-radius: var(--radius-full);
}

/* End Comprehensive Responsive Design System */

/* Select dropdown font color fix */

.form-control select,
select.form-control {
  color: #ffffff !important;
}

.form-select option,
.form-control option,
select.form-control option {
  color: #000000 !important;
}

/* Fix autocomplete background issue */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  -webkit-text-fill-color: white !important;
  background-color: transparent !important;
  background-image: none !important;
  transition: background-color 5000s ease-in-out 0s;
  color: white !important;
}

/* Firefox autocomplete fix */
input:-moz-autofill {
  background-color: transparent !important;
  background-image: none !important;
}

/* General autocomplete styling */
input[autocomplete],
input[list] {
  background-color: transparent !important;
}

/* Datalist option styling */
datalist option {
  background-color: white;
  color: #000000;
}