/**
 * 🎨 STATUS GLOBAL SYSTEM - PraFrota
 * 
 * Sistema unificado de estilos para status em toda aplicação
 * Baseado em account-payable-items.component.scss
 * 
 * 📋 Status Disponíveis:
 * - Financeiros: pending, paid, cancelled, approved, refused
 * - Gerais: active, inactive, suspended, archived
 * - Estados: unknown, processing, completed, failed
 * 
 * 🎯 Uso: <span class="status-badge status-pending">Pendente</span>
 */

// ========================================
// 🎨 STATUS BADGES - SISTEMA GLOBAL
// ========================================

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;

  // Ícone opcional
  i {
    margin-right: 0.25rem;
    font-size: 0.7rem;
  }

  // ========================================
  // 💰 STATUS FINANCEIROS
  // ========================================

  &.status-pending {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeaa7;

    &:hover {
      background-color: #ffecb5;
      transform: translateY(-1px);
    }
  }

  &.status-paid {
    background-color: #d1edff;
    color: #084298;
    border-color: #b6d7ff;

    &:hover {
      background-color: #b6d7ff;
      transform: translateY(-1px);
    }
  }

  &.status-cancelled {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f1aeb5;

    &:hover {
      background-color: #f1aeb5;
      transform: translateY(-1px);
    }
  }

  &.status-approved {
    background-color: #d1edff;
    color: #084298;
    border-color: #b6d7ff;

    &:hover {
      background-color: #b6d7ff;
      transform: translateY(-1px);
    }
  }

  &.status-approved-customer {
    background-color: #d1edff;
    color: #084298;
    border-color: #b6d7ff;

    &:hover {
      background-color: #b6d7ff;
      transform: translateY(-1px);
    }
  }

  &.status-refused {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f1aeb5;

    &:hover {
      background-color: #f1aeb5;
      transform: translateY(-1px);
    }
  }

  // ========================================
  // 🔄 STATUS GERAIS
  // ========================================

  &.status-active {
    background-color: #d1edff;
    color: #084298;
    border-color: #b6d7ff;

    &:hover {
      background-color: #b6d7ff;
      transform: translateY(-1px);
    }
  }

  &.status-inactive {
    background-color: #e2e3e5;
    color: #495057;
    border-color: #d6d8db;

    &:hover {
      background-color: #d6d8db;
      transform: translateY(-1px);
    }
  }

  &.status-suspended {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeaa7;

    &:hover {
      background-color: #ffecb5;
      transform: translateY(-1px);
    }
  }

  &.status-archived {
    background-color: #e2e3e5;
    color: #495057;
    border-color: #d6d8db;

    &:hover {
      background-color: #d6d8db;
      transform: translateY(-1px);
    }
  }

  // ========================================
  // ⚙️ STATUS DE PROCESSAMENTO
  // ========================================

  &.status-processing {
    background-color: #cff4fc;
    color: #055160;
    border-color: #b8daff;

    &:hover {
      background-color: #b8daff;
      transform: translateY(-1px);
    }

    // Animação de loading para status processing
    &::after {
      content: '';
      width: 0.5rem;
      height: 0.5rem;
      border: 1px solid #055160;
      border-top: 1px solid transparent;
      border-radius: 50%;
      display: inline-block;
      margin-left: 0.25rem;
      animation: spin 1s linear infinite;
    }
  }

  &.status-completed {
    background-color: #d1edff;
    color: #084298;
    border-color: #b6d7ff;

    &:hover {
      background-color: #b6d7ff;
      transform: translateY(-1px);
    }
  }

  &.status-failed {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f1aeb5;

    &:hover {
      background-color: #f1aeb5;
      transform: translateY(-1px);
    }
  }

  &.status-unknown {
    background-color: #e2e3e5;
    color: #495057;
    border-color: #d6d8db;

    &:hover {
      background-color: #d6d8db;
      transform: translateY(-1px);
    }
  }

  // ========================================
  // 📊 VARIAÇÕES DE TAMANHO
  // ========================================

  &.status-sm {
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
  }

  &.status-lg {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }

  // ========================================
  // 🌙 DARK MODE SUPPORT
  // ========================================

  @media (prefers-color-scheme: dark) {
    &.status-pending {
      background-color: #664d03;
      color: #ffecb5;
      border-color: #856404;
    }

    &.status-paid,
    &.status-approved,
    &.status-approved-customer,
    &.status-active,
    &.status-completed {
      background-color: #052c65;
      color: #b6d7ff;
      border-color: #084298;
    }

    &.status-cancelled,
    &.status-refused,
    &.status-failed {
      background-color: #58151c;
      color: #f1aeb5;
      border-color: #721c24;
    }

    &.status-inactive,
    &.status-archived,
    &.status-unknown {
      background-color: #373a3c;
      color: #d6d8db;
      border-color: #495057;
    }

    &.status-processing {
      background-color: #032830;
      color: #b8daff;
      border-color: #055160;
    }

    &.status-suspended {
      background-color: #664d03;
      color: #ffecb5;
      border-color: #856404;
    }
  }
}

// ========================================
// 🎯 BADGES INFORMATIVOS (SUMMARY)
// ========================================

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;

  i {
    margin-right: 0.375rem;
  }

  &.badge-info {
    background-color: #17a2b8;
    color: white;

    &:hover {
      background-color: #138496;
      transform: translateY(-1px);
    }
  }

  &.badge-secondary {
    background-color: #28a745;
    color: white;

    &:hover {
      background-color: #218838;
      transform: translateY(-1px);
    }
  }

  &.badge-warning {
    background-color: #ff5507;
    color: white;

    &:hover {
      background-color: #e04e06;
      transform: translateY(-1px);
    }
  }

  &.badge-primary {
    background-color: #007bff;
    color: white;

    &:hover {
      background-color: #0056b3;
      transform: translateY(-1px);
    }
  }

  &.badge-success {
    background-color: #28a745;
    color: white;

    &:hover {
      background-color: #218838;
      transform: translateY(-1px);
    }
  }

  &.badge-danger {
    background-color: #dc3545;
    color: white;

    &:hover {
      background-color: #c82333;
      transform: translateY(-1px);
    }
  }
}

// ========================================
// 🎬 ANIMAÇÕES
// ========================================

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// ========================================
// 📱 RESPONSIVIDADE
// ========================================

@media (max-width: 768px) {
  .status-badge {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.375rem;

    &.status-lg {
      font-size: 0.75rem;
      padding: 0.25rem 0.5rem;
    }
  }

  .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
  }
}

// ========================================
// 🎨 ESTADOS VISUAIS GLOBAIS
// ========================================

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;

  i {
    color: #dee2e6;
    margin-bottom: 1rem;
    font-size: 3rem;
  }

  h4 {
    margin-bottom: 0.5rem;
    color: #495057;
    font-weight: 600;
  }

  p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .btn {
    margin-top: 1rem;
  }
}

.error-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #dc3545;

  i {
    color: #f8d7da;
    margin-bottom: 1rem;
    font-size: 3rem;
  }

  h4 {
    margin-bottom: 0.5rem;
    color: #721c24;
    font-weight: 600;
  }

  p {
    margin-bottom: 1.5rem;
    color: #856404;
    line-height: 1.5;
  }

  .btn {
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-weight: 500;

    i {
      margin-right: 0.5rem;
      color: inherit;
      font-size: 1rem;
    }
  }
}

.loading-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;

  .spinner {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid #dee2e6;
    border-top: 0.25rem solid #007bff;
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: spin 1s linear infinite;
  }

  h4 {
    margin-bottom: 0.5rem;
    color: #495057;
    font-weight: 600;
  }

  p {
    margin: 0;
    font-size: 0.9rem;
  }
}

// ========================================
// 🔧 UTILITÁRIOS DE STATUS
// ========================================

.status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.status-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;

  .status-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
  }
}

// ========================================
// 📊 SUMMARY HEADER STYLES
// ========================================

.items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e9ecef;

  h3 {
    margin: 0;
    color: #495057;
    font-weight: 600;

    i {
      margin-right: 0.5rem;
      color: #007bff;
    }
  }

  .items-summary {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;

    .items-summary {
      width: 100%;
      justify-content: flex-start;
    }
  }
}

// ========================================
// 💼 CONTRACT TYPE STATUS BADGES
// ========================================

.status-badge {
  // CLT - Verde
  &.status-clt {
    background-color: #d1f2eb;
    color: #0f5132;
    border-color: #a3e3d0;

    &:hover {
      background-color: #a3e3d0;
      transform: translateY(-1px);
    }
  }

  // Freelancer - Azul
  &.status-freelancer {
    background-color: #cff4fc;
    color: #055160;
    border-color: #9eeaf9;

    &:hover {
      background-color: #9eeaf9;
      transform: translateY(-1px);
    }
  }

  // Terceirizado - Laranja
  &.status-outsourced {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeaa7;

    &:hover {
      background-color: #ffecb5;
      transform: translateY(-1px);
    }
  }

  // Aluguel/Rentals - Roxo
  &.status-rentals {
    background-color: #e0cffc;
    color: #59359a;
    border-color: #c29ffa;

    &:hover {
      background-color: #c29ffa;
      transform: translateY(-1px);
    }
  }

  // Frota Fixa - Verde Escuro
  &.status-fix {
    background-color: #d1f2eb;
    color: #0a3622;
    border-color: #a3e3d0;

    &:hover {
      background-color: #a3e3d0;
      transform: translateY(-1px);
    }
  }

  // Agregado - Vermelho
  &.status-aggregated {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f1aeb5;

    &:hover {
      background-color: #f1aeb5;
      transform: translateY(-1px);
    }
  }

  // ========================================
  // 🚨 SEVERITY STATUS BADGES (FINES)
  // ========================================

  // Gravíssima - Vermelho com animação
  &.status-gravissima {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f1aeb5;
    font-weight: 700;
    animation: pulse-danger 2s infinite;

    &:hover {
      background-color: #f1aeb5;
      transform: translateY(-1px);
    }
  }
  &.status-gravissima-x {
    background-color: #ca0fd0;
    color: #f8dde8;
    border-color: #f1aeb5;
    font-weight: 700;
    animation: pulse-danger 2s infinite;

    &:hover {
      background-color: #f1aeb5;
      transform: translateY(-1px);
    }
  }
  

  // Grave/Média - Laranja
  &.status-high {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeaa7;
    font-weight: 600;

    &:hover {
      background-color: #ffecb5;
      transform: translateY(-1px);
    }
  }

  // Leve - Verde
  &.status-low {
    background-color: #d1f2eb;
    color: #0f5132;
    border-color: #a3e3d0;

    &:hover {
      background-color: #a3e3d0;
      transform: translateY(-1px);
    }
  }
}

// 🎯 Animação para severidade crítica (já existe, mas garantindo que está aqui)
@keyframes pulse-danger {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 127, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(220, 38, 127, 0.1);
  }
}
