/* ============================================
   SOLVEIT CRM - THEME CSS
   Brand colors, fonts, and base utilities
   ============================================ */

/* CSS Variables */
:root {
  /* Brand Colors - SolveIT Solutions */
  --brand: #777cfe;           /* Primary purple */
  --brand-hover: #c926ff;     /* Hover magenta */
  --brand-light: rgba(119, 124, 254, 0.1);
  --brand-cyan: #18dafe;      /* Accent cyan */
  --brand-dark: #2c28d4;      /* Deep blue */
  --brand-navy: #1f2070;      /* Navy */

  /* Gradients */
  --gradient-button: linear-gradient(135deg, #18dafe, #c926ff);
  --gradient-sidebar: linear-gradient(180deg, #1f2070 0%, #161654 100%);
  --gradient-header: linear-gradient(135deg, #2c28d4 0%, #1f2070 40%, #777cfe 100%);

  /* Dark Surface Colors */
  --surface: #0A0A0A;
  --surface-50: #111111;
  --surface-100: #1A1A1A;
  --surface-200: #222222;
  --surface-300: #333333;
  --surface-400: #444444;

  /* Text Colors */
  --text-primary: #FFFFFF;
  --text-secondary: #CCCCCC;
  --text-muted: #999999;
  --text-dark: #202124;
  --text-dark-secondary: #5f6368;
  --text-dark-light: #9aa0a6;

  /* Status Colors */
  --success: #10b981;
  --warning: #fbbf24;
  --danger: #dc3545;
  --info: #3B82F6;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --glow: 0 0 30px -5px rgba(119, 124, 254, 0.4);
  --glow-sm: 0 0 20px -5px rgba(119, 124, 254, 0.3);
}

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

body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* ============================================
   BRAND COLORS
   ============================================ */

/* Background */
.bg-brand { background-color: var(--brand) !important; }
.bg-brand-hover { background-color: var(--brand-hover) !important; }
.bg-brand-light { background-color: var(--brand-light) !important; }

/* Text */
.text-brand { color: var(--brand) !important; }
.text-brand-hover { color: var(--brand-hover) !important; }

/* Border */
.border-brand { border-color: var(--brand) !important; }

/* Hover States */
.hover\:bg-brand:hover { background-color: var(--brand) !important; }
.hover\:bg-brand-hover:hover { background-color: var(--brand-hover) !important; }
.hover\:text-brand:hover { color: var(--brand) !important; }

/* Focus States */
.focus\:border-brand:focus { border-color: var(--brand) !important; }
.focus\:ring-brand:focus {
  --tw-ring-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(119, 124, 254, 0.2);
}

/* ============================================
   SURFACE COLORS (Dark Theme)
   ============================================ */
.bg-surface { background-color: var(--surface) !important; }
.bg-surface-50 { background-color: var(--surface-50) !important; }
.bg-surface-100 { background-color: var(--surface-100) !important; }
.bg-surface-200 { background-color: var(--surface-200) !important; }
.bg-surface-300 { background-color: var(--surface-300) !important; }
.bg-surface-400 { background-color: var(--surface-400) !important; }

.hover\:bg-surface-200:hover { background-color: var(--surface-200) !important; }
.hover\:bg-surface-300:hover { background-color: var(--surface-300) !important; }
.hover\:bg-surface-400:hover { background-color: var(--surface-400) !important; }

/* ============================================
   UTILITIES
   ============================================ */

/* Glow Effects */
.glow { box-shadow: var(--glow); }
.glow-sm { box-shadow: var(--glow-sm); }

/* Hide Scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Safe Area (for mobile notches) */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-top { padding-top: env(safe-area-inset-top); }

/* Tap Highlight */
* { -webkit-tap-highlight-color: transparent; }

/* Line Clamp */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Custom Scrollbar (Desktop) */
@media (min-width: 1024px) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: #f1f1f1; }
  ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #aaa; }

  /* Dark scrollbar for dark containers */
  .dark-scrollbar::-webkit-scrollbar-track { background: var(--surface-100); }
  .dark-scrollbar::-webkit-scrollbar-thumb { background: var(--surface-400); }
}

/* Transitions */
.transition-theme {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scale-in {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.animate-slide-up { animation: slide-up 0.3s ease-out; }
.animate-fade-in { animation: fade-in 0.2s ease-out; }
.animate-scale-in { animation: scale-in 0.2s ease-out; }