// 🏦 Account Payable Component Styles
// Estilos específicos para contas a pagar com status badges

.domain-container {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.main-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

app-tab-system {
  flex: 1;
  min-height: 0;
}

// ========================================
// 🎨 STATUS BADGES (ViewEncapsulation bypass)
// ========================================

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

  &.status-pending {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
    
    &:before {
      content: '\f017'; // fa-clock
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      margin-right: 0.5rem;
    }
  }

  &.status-requested-advance {
    background-color: rgba(255, 243, 205, 0.15);
    color: #e490f6;
    border-color: rgba(255, 234, 167, 0.3);

    &:before {
      content: '\f017'; // fa-clock
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      margin-right: 0.5rem;
    }
  }


  &.status-paid {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    
    &:before {
      content: '\f058'; // fa-check-circle
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      margin-right: 0.5rem;
    }
  }

  &.status-overdue {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    
    &:before {
      content: '\f071'; // fa-exclamation-triangle
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      margin-right: 0.5rem;
    }
  }

  &.status-cancelled {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
    
    &:before {
      content: '\f057'; // fa-times-circle
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      margin-right: 0.5rem;
    }
  }

  &.status-partial {
    background-color: #cce7ff;
    color: #004085;
    border: 1px solid #99d3ff;
    
    &:before {
      content: '\f017'; // fa-clock
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      margin-right: 0.5rem;
    }
  }

  &.status-unknown {
    background-color: #f5f5f5;
    color: #666;
    border: 1px solid #e0e0e0;
    
    &:before {
      content: '\f059'; // fa-question-circle
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      margin-right: 0.5rem;
    }
  }
  &.status-approved {
    background-color: #d1edff;
    color: #084298;
    border: 1px solid #b6d7ff;
  }
  &.status-approved-customer {    
    background-color: #1daf00;
    color: #ffffff;
    border: 1px solid #e4ffb6;
  }
  &.status-refused {    
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
  }
  &.status-cancelled {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
  }
}

// ========================================
// 🎨 CATEGORY BADGES
// ========================================

::ng-deep .category-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: none;
  min-width: 120px;
  justify-content: center;

  i {
    font-size: 1rem;
    margin-right: 0.5rem;
    width: 16px;
    text-align: center;
  }

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
}

// ========================================
// 📸 PHOTOS BADGES
// ========================================

::ng-deep .photos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 60px;
  gap: 0.375rem;

  i {
    font-size: 1rem;
  }

  .count {
    font-weight: 700;
    font-size: 0.75rem;
  }

  &.has-photos {
    background-color: #e7f3ff;
    color: #0066cc;
    border: 1px solid #b3d9ff;
  }

  &.no-photos {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
  }
}

// ========================================
// 📱 MOBILE RESPONSIVE
// ========================================

@media (max-width: 768px) {
  .domain-container {
    padding: 0.25rem;
  }

  ::ng-deep .status-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    
    &:before {
      margin-right: 0.25rem;
      font-size: 0.8em;
    }
  }

  ::ng-deep .category-badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    min-width: 100px;
    
    i {
      font-size: 0.8rem;
      margin-right: 0.3rem;
    }
  }

  ::ng-deep .photos-badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    min-width: 50px;
  }
}

// ========================================
// 🖨️ PRINT STYLES
// ========================================

@media print {
  ::ng-deep .status-badge {
    background-color: transparent !important;
    border: 1px solid #000 !important;
    color: #000 !important;
    
    &:before {
      display: none !important;
    }
  }

  ::ng-deep .category-badge {
    background-color: transparent !important;
    border: 1px solid #000 !important;
    color: #000 !important;
    box-shadow: none !important;
    
    i {
      display: none !important;
    }
  }
}

// ========================================
// 🎯 LEGACY TYPOGRAPHY SUPPORT
// ========================================

.finances {
  padding: 1rem;
}

.page-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  font-family: var(--font-primary);
  line-height: var(--line-height-tight);
}

.section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
  margin-bottom: 0.75rem;
}

.description-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-tertiary);
  line-height: var(--line-height-relaxed);
  margin-bottom: 1rem;
}

.field-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
  margin-bottom: 0.5rem;
}

.help-text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--text-tertiary);
  line-height: var(--line-height-normal);
  margin-top: 0.25rem;
}

.error-message {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--text-error);
  line-height: var(--line-height-normal);
  margin-top: 0.25rem;
}

.success-message {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--text-success);
  line-height: var(--line-height-normal);
  margin-top: 0.25rem;
}

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

[data-theme="dark"] {
  ::ng-deep .status-badge {
      &.status-pending {
        background-color: rgba(255, 243, 205, 0.15);
        color: #ffeaa7;
        border-color: rgba(255, 234, 167, 0.3);
      }
    &.status-requested-advance {
      background-color: rgba(255, 243, 205, 0.15);
      color: #e490f6;
      border-color: rgba(255, 234, 167, 0.3);
    }

    &.status-paid {
      background-color: rgba(212, 237, 218, 0.15);
      color: #a3e4a3;
      border-color: rgba(195, 230, 203, 0.3);
    }

    &.status-overdue {
      background-color: rgba(248, 215, 218, 0.15);
      color: #ff9999;
      border-color: rgba(245, 198, 203, 0.3);
    }

    &.status-cancelled {
      background-color: rgba(226, 227, 229, 0.15);
      color: #ccc;
      border-color: rgba(214, 216, 219, 0.3);
    }

    &.status-partial {
      background-color: rgba(204, 231, 255, 0.15);
      color: #99d3ff;
      border-color: rgba(153, 211, 255, 0.3);
    }

    &.status-unknown {
      background-color: rgba(245, 245, 245, 0.15);
      color: #999;
      border-color: rgba(224, 224, 224, 0.3);
    }
  }

  // Dark mode para category badges
  ::ng-deep .category-badge {
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
    
    &:hover {
      box-shadow: 0 4px 8px rgba(255,255,255,0.15);
    }

    // Ajustar cores para dark mode
    &[style*="#f8f9fa"] { // Uncategorized em dark mode
      background-color: #495057 !important;
      color: #ffffff !important;
      border-color: #6c757d;
    }
  }
} 