/* AdFaz Custom Theme - Modern UI Enhancements */

/* ============================================
   Modern Color Palette
   ============================================ */
:root {
  /* Primary Brand Colors */
  --adfaz-primary: #2563eb;
  --adfaz-primary-dark: #1e40af;
  --adfaz-primary-light: #3b82f6;

  /* Accent Colors */
  --adfaz-accent: #10b981;
  --adfaz-accent-dark: #059669;

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

  /* Status Colors */
  --adfaz-success: #10b981;
  --adfaz-warning: #f59e0b;
  --adfaz-error: #ef4444;
  --adfaz-info: #3b82f6;

  /* Shadows */
  --adfaz-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --adfaz-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --adfaz-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --adfaz-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --adfaz-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Border Radius */
  --adfaz-radius-sm: 0.375rem;
  --adfaz-radius: 0.5rem;
  --adfaz-radius-md: 0.75rem;
  --adfaz-radius-lg: 1rem;
  --adfaz-radius-xl: 1.5rem;
}

/* ============================================
   Override Chatwoot Primary Colors
   ============================================ */
.bg-woot-500,
.bg-primary,
[class*="bg-woot"] {
  background-color: var(--adfaz-primary) !important;
}

.text-woot-500,
.text-primary {
  color: var(--adfaz-primary) !important;
}

.border-woot-500 {
  border-color: var(--adfaz-primary) !important;
}

/* ============================================
   Modern Button Styling
   ============================================ */
.button,
button,
.btn,
[class*="button"] {
  border-radius: var(--adfaz-radius) !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  box-shadow: var(--adfaz-shadow-sm) !important;
}

.button:hover,
button:hover,
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--adfaz-shadow-md) !important;
}

.button--primary,
.button.primary,
.btn-primary {
  background: linear-gradient(135deg, var(--adfaz-primary) 0%, var(--adfaz-primary-dark) 100%) !important;
  border: none !important;
}

.button--primary:hover {
  background: linear-gradient(135deg, var(--adfaz-primary-dark) 0%, var(--adfaz-primary) 100%) !important;
}

/* ============================================
   Modern Card Styling
   ============================================ */
.card,
[class*="card"],
.conversation-card,
.contact-card {
  border-radius: var(--adfaz-radius-lg) !important;
  box-shadow: var(--adfaz-shadow) !important;
  border: 1px solid var(--adfaz-gray-200) !important;
  transition: all 0.3s ease !important;
}

.card:hover,
.conversation-card:hover {
  box-shadow: var(--adfaz-shadow-lg) !important;
  transform: translateY(-2px);
}

/* ============================================
   Modern Sidebar
   ============================================ */
.sidebar,
[class*="sidebar"],
.primary-sidebar {
  background: linear-gradient(180deg, var(--adfaz-gray-900) 0%, var(--adfaz-gray-800) 100%) !important;
  box-shadow: var(--adfaz-shadow-xl) !important;
}

.sidebar-item,
.sidebar .menu-item {
  border-radius: var(--adfaz-radius) !important;
  transition: all 0.2s ease !important;
  margin: 4px 8px !important;
}

.sidebar-item:hover,
.sidebar .menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(4px);
}

.sidebar-item.active,
.sidebar .menu-item.active {
  background: linear-gradient(135deg, var(--adfaz-primary) 0%, var(--adfaz-primary-dark) 100%) !important;
  box-shadow: var(--adfaz-shadow-md) !important;
}

/* ============================================
   Modern Input Fields
   ============================================ */
input,
textarea,
select,
.input,
[class*="input"] {
  border-radius: var(--adfaz-radius) !important;
  border: 1px solid var(--adfaz-gray-300) !important;
  transition: all 0.2s ease !important;
  padding: 0.625rem 0.875rem !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--adfaz-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

/* ============================================
   Modern Chat Bubbles
   ============================================ */
.message-bubble,
[class*="message"],
.chat-bubble {
  border-radius: var(--adfaz-radius-lg) !important;
  box-shadow: var(--adfaz-shadow-sm) !important;
  padding: 0.75rem 1rem !important;
}

.message-bubble.outgoing,
.chat-bubble.sent {
  background: linear-gradient(135deg, var(--adfaz-primary) 0%, var(--adfaz-primary-light) 100%) !important;
  border-bottom-right-radius: var(--adfaz-radius-sm) !important;
}

.message-bubble.incoming,
.chat-bubble.received {
  background-color: var(--adfaz-gray-100) !important;
  border-bottom-left-radius: var(--adfaz-radius-sm) !important;
}

/* ============================================
   Modern Navigation Header
   ============================================ */
.header,
[class*="header"],
.top-bar {
  background-color: white !important;
  border-bottom: 1px solid var(--adfaz-gray-200) !important;
  box-shadow: var(--adfaz-shadow-sm) !important;
  backdrop-filter: blur(10px);
}

/* ============================================
   Modern Badges and Tags
   ============================================ */
.badge,
.tag,
[class*="badge"],
[class*="label"] {
  border-radius: var(--adfaz-radius) !important;
  font-weight: 500 !important;
  padding: 0.25rem 0.625rem !important;
  font-size: 0.75rem !important;
}

.badge-success,
.tag-success {
  background-color: var(--adfaz-success) !important;
  color: white !important;
}

.badge-warning,
.tag-warning {
  background-color: var(--adfaz-warning) !important;
  color: white !important;
}

.badge-error,
.tag-error {
  background-color: var(--adfaz-error) !important;
  color: white !important;
}

/* ============================================
   Modern Modals
   ============================================ */
.modal,
.modal-container,
[class*="modal"] {
  border-radius: var(--adfaz-radius-xl) !important;
  box-shadow: var(--adfaz-shadow-xl) !important;
  border: none !important;
}

.modal-header {
  border-bottom: 1px solid var(--adfaz-gray-200) !important;
  padding: 1.5rem !important;
}

.modal-footer {
  border-top: 1px solid var(--adfaz-gray-200) !important;
  padding: 1.5rem !important;
}

/* ============================================
   Modern Scrollbar
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--adfaz-gray-100);
  border-radius: var(--adfaz-radius);
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--adfaz-gray-500);
}

/* ============================================
   Modern Animations
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease;
}

/* ============================================
   Smooth Transitions for All Elements
   ============================================ */
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

/* ============================================
   Modern Status Indicators
   ============================================ */
.status-indicator,
.online-indicator,
[class*="status"] {
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8) !important;
}

/* ============================================
   Typography Enhancements
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  color: var(--adfaz-gray-900) !important;
}

.text-muted {
  color: var(--adfaz-gray-500) !important;
}

/* ============================================
   Hover Effects
   ============================================ */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--adfaz-shadow-lg) !important;
}

/* ============================================
   Glass Morphism Effect (Optional)
   ============================================ */
.glass {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ============================================
   Improved Focus States for Accessibility
   ============================================ */
*:focus-visible {
  outline: 2px solid var(--adfaz-primary) !important;
  outline-offset: 2px !important;
}