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

/* CSS Variables */
:root {
  /* Brand Colors */
  --brand: #22C55E;
  --brand-hover: #16A34A;
  --brand-light: rgba(34, 197, 94, 0.1);

  /* 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: #111827;
  --text-dark-secondary: #6B7280;

  /* Status Colors */
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --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(34, 197, 94, 0.4);
  --glow-sm: 0 0 20px -5px rgba(34, 197, 94, 0.3);
}

/* ============================================
   FONT
   ============================================ */
body {
  font-family: 'Inter', 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(34, 197, 94, 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; }