/**
 * CSS Principal do Sistema de Suporte
 * /suporte/assets/css/main.css
 */

/* =====================================================
   CONFIGURAÇÃO DO TAILWIND
   ===================================================== */

/* Configurar Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* =====================================================
   VARIÁVEIS CSS CUSTOMIZADAS
   ===================================================== */

:root {
  /* Cores Primárias */
  --primary-50: #f0f9ff;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  
  /* Cores WhatsApp */
  --whatsapp-50: #f0fdf4;
  --whatsapp-500: #25d366;
  --whatsapp-600: #16a34a;
  
  /* Grays */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Transições */
  --transition-all: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-colors: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  
  /* Bordas */
  --border-radius: 0.5rem;
  --border-radius-lg: 0.75rem;
  
  /* Z-index */
  --z-dropdown: 50;
  --z-sticky: 40;
  --z-fixed: 30;
  --z-modal: 60;
}

/* =====================================================
   RESET E BASE STYLES
   ===================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--gray-900);
  background-color: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =====================================================
   UTILIDADES CUSTOMIZADAS
   ===================================================== */

/* Cores customizadas do projeto */
.text-primary {
  color: var(--primary-600);
}

.bg-primary {
  background-color: var(--primary-600);
}

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

.bg-whatsapp {
  background-color: var(--whatsapp-600);
}

/* =====================================================
   COMPONENTES CUSTOMIZADOS
   ===================================================== */

/* Botões */
.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
}

.btn-secondary {
  @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500;
}

.btn-whatsapp {
  @apply bg-whatsapp-600 text-white hover:bg-whatsapp-700 focus:ring-whatsapp-500;
}

.btn-danger {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-sm {
  @apply px-3 py-1.5 text-sm;
}

.btn-lg {
  @apply px-6 py-3 text-lg;
}

/* Cards */
.card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200;
}

.card-header {
  @apply px-6 py-4 border-b border-gray-200;
}

.card-body {
  @apply p-6;
}

.card-footer {
  @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
}

/* Forms */
.form-group {
  @apply mb-4;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-input {
  @apply block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm;
}

.form-textarea {
  @apply block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm resize-vertical;
}

.form-select {
  @apply block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm;
}

.form-error {
  @apply text-red-600 text-sm mt-1;
}

/* Badges/Tags */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
  @apply bg-primary-100 text-primary-800;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
  @apply bg-red-100 text-red-800;
}

.badge-info {
  @apply bg-blue-100 text-blue-800;
}

.badge-secondary {
  @apply bg-gray-100 text-gray-800;
}

/* Loading States */
.loading {
  @apply opacity-50 pointer-events-none;
}

.spinner {
  @apply animate-spin h-5 w-5 border-2 border-gray-300 border-t-primary-600 rounded-full;
}

/* Navigation */
.nav-link {
  @apply flex items-center p-3 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors duration-200;
}

.nav-link.active {
  @apply bg-primary-50 text-primary-700;
}

.nav-link:hover:not(.active) {
  @apply bg-gray-100;
}

/* Tables */
.table {
  @apply min-w-full divide-y divide-gray-200;
}

.table thead {
  @apply bg-gray-50;
}

.table th {
  @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.table tbody tr {
  @apply hover:bg-gray-50 transition-colors duration-150;
}

/* Alerts */
.alert {
  @apply p-4 rounded-lg border;
}

.alert-success {
  @apply bg-green-50 border-green-200 text-green-800;
}

.alert-error {
  @apply bg-red-50 border-red-200 text-red-800;
}

.alert-warning {
  @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.alert-info {
  @apply bg-blue-50 border-blue-200 text-blue-800;
}

/* =====================================================
   ANIMAÇÕES CUSTOMIZADAS
   ===================================================== */

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

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

/* Slide In */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

/* Pulse */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* =====================================================
   RESPONSIVIDADE
   ===================================================== */

/* Mobile First Breakpoints */
@media (max-width: 640px) {
  .card {
    @apply rounded-none border-l-0 border-r-0;
  }
  
  .table {
    font-size: 14px;
  }
  
  .table th,
  .table td {
    @apply px-3 py-2;
  }
}

/* Tablet */
@media (min-width: 768px) {
  .sidebar-overlay {
    display: none;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
}

/* =====================================================
   UTILIDADES ESPECÍFICAS DO SISTEMA
   ===================================================== */

/* Status indicators */
.status-online {
  @apply w-3 h-3 bg-green-500 rounded-full;
}

.status-offline {
  @apply w-3 h-3 bg-gray-400 rounded-full;
}

.status-busy {
  @apply w-3 h-3 bg-red-500 rounded-full;
}

.status-away {
  @apply w-3 h-3 bg-yellow-500 rounded-full;
}

/* Priority indicators */
.priority-low {
  @apply text-gray-600;
}

.priority-normal {
  @apply text-blue-600;
}

.priority-high {
  @apply text-orange-600;
}

.priority-urgent {
  @apply text-red-600;
}

/* Message bubbles */
.message-bubble {
  @apply max-w-xs lg:max-w-md px-4 py-2 rounded-lg;
}

.message-sent {
  @apply bg-primary-500 text-white ml-auto;
  border-bottom-right-radius: 4px;
}

.message-received {
  @apply bg-white border border-gray-200 mr-auto;
  border-bottom-left-radius: 4px;
}

/* Chat interface */
.chat-container {
  height: calc(100vh - 140px);
}

.chat-messages {
  height: calc(100% - 80px);
  @apply overflow-y-auto;
}

.chat-input {
  @apply border-t border-gray-200 p-4 bg-white;
}

/* Scrollbar customization */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: rgb(209 213 219) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: rgb(209 213 219);
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: rgb(156 163 175);
}

/* =====================================================
   DARK MODE SUPPORT (FUTURO)
   ===================================================== */

@media (prefers-color-scheme: dark) {
  /* Implementar dark mode futuramente */
}

/* =====================================================
   PRINT STYLES
   ===================================================== */

@media print {
  .no-print {
    display: none !important;
  }
  
  .sidebar,
  .header,
  .btn {
    display: none !important;
  }
  
  .main-content {
    margin-left: 0 !important;
    padding-top: 0 !important;
  }
}