/**
 * FastPedia Error Styling
 *
 * Comprehensive error display styles for forms, AJAX errors, and page-level errors
 * Compatible with Bootstrap 5.3
 */

/* ===================================
   Color Palette
   =================================== */
:root {
  /* Error colors */
  --error-text: #DC2626;        /* Red 600 - WCAG AA compliant */
  --error-bg: #FEF2F2;          /* Red 50 */
  --error-border: #FCA5A5;      /* Red 300 */
  --error-hover: #B91C1C;       /* Red 700 */

  /* Warning colors */
  --warning-text: #D97706;      /* Yellow 600 */
  --warning-bg: #FFFBEB;        /* Yellow 50 */
  --warning-border: #FDE68A;    /* Yellow 200 */

  /* Success colors */
  --success-text: #059669;      /* Green 600 */
  --success-bg: #ECFDF5;        /* Green 50 */
  --success-border: #6EE7B7;    /* Green 300 */
}

/* ===================================
   Field-Level Errors
   =================================== */

/* Error input styling */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--error-text);
  border-width: 2px;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23DC2626'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23DC2626' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--error-text);
  box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.25);
}

/* Checkbox and radio errors */
.form-check-input.is-invalid {
  border-color: var(--error-text);
  border-width: 2px;
}

.form-check-input.is-invalid:checked {
  background-color: var(--error-text);
  border-color: var(--error-text);
}

.form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.25);
}

/* Error feedback text */
.invalid-feedback {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--error-text);
  line-height: 1.4;
}

.invalid-feedback i {
  flex-shrink: 0;
  margin-top: 0.15em;
}

/* ===================================
   Form Error Banners
   =================================== */

/* Error alert styling */
.alert-danger {
  background-color: var(--error-bg);
  border: 2px solid var(--error-border);
  border-left-width: 4px;
  color: var(--error-text);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
}

.alert-danger .alert-heading {
  color: var(--error-hover);
  font-weight: 700;
}

.alert-danger .bi {
  color: var(--error-text);
}

.alert-danger a {
  color: var(--error-hover);
  text-decoration: underline;
}

.alert-danger a:hover {
  color: var(--error-text);
}

/* Warning alert styling */
.alert-warning {
  background-color: var(--warning-bg);
  border: 2px solid var(--warning-border);
  border-left-width: 4px;
  color: var(--warning-text);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.1);
}

.alert-warning .alert-heading {
  color: var(--warning-text);
  font-weight: 700;
}

.alert-warning .bi {
  color: var(--warning-text);
}

/* Success alert styling */
.alert-success {
  background-color: var(--success-bg);
  border: 2px solid var(--success-border);
  border-left-width: 4px;
  color: var(--success-text);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1);
}

.alert-success .alert-heading {
  color: var(--success-text);
  font-weight: 700;
}

.alert-success .bi {
  color: var(--success-text);
}

/* ===================================
   Toast Notifications
   =================================== */

#toast-container {
  z-index: 9999;
  position: fixed;
  top: 1rem;
  right: 1rem;
}

.toast {
  min-width: 300px;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.toast-body {
  padding: 1rem 1.25rem;
  line-height: 1.5;
}

.toast-body strong {
  display: block;
  margin-bottom: 0.25rem;
}

/* ===================================
   Page-Level Error States
   =================================== */

.card.border-danger {
  border-color: var(--error-border);
  border-width: 2px;
}

.card.border-danger .card-body {
  background: linear-gradient(135deg, var(--error-bg) 0%, #fff 100%);
}

/* ===================================
   Loading States
   =================================== */

.btn.loading,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* ===================================
   Required Field Indicator
   =================================== */

.form-label.required::after,
.form-label .text-danger {
  color: var(--error-text);
  font-weight: 700;
}

/* ===================================
   Focus States (Accessibility)
   =================================== */

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.form-control:focus {
  border-color: var(--fp-primary-blue, #2563EB);
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

.form-control.is-invalid:focus {
  border-color: var(--error-text);
  box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.25);
}

/* ===================================
   Animations
   =================================== */

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Apply animations */
.toast {
  animation: slideInFromRight 0.3s ease-out;
}

.alert {
  animation: fadeIn 0.4s ease-out;
}

.is-invalid {
  animation: shake 0.5s ease-out;
}

/* ===================================
   Responsive Design
   =================================== */

@media (max-width: 768px) {
  /* Full-width toasts on mobile */
  #toast-container {
    left: 1rem;
    right: 1rem;
  }

  .toast {
    min-width: auto;
    max-width: 100%;
  }

  /* Larger touch targets */
  .btn-close {
    width: 1.5em;
    height: 1.5em;
  }

  /* Better spacing on mobile */
  .alert {
    padding: 1rem;
    font-size: 0.9rem;
  }

  .alert-heading {
    font-size: 1rem;
  }

  .invalid-feedback {
    font-size: 0.85rem;
  }
}

@media (max-width: 576px) {
  /* Stack alert content on small screens */
  .alert .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .alert .me-3 {
    margin-right: 0 !important;
    margin-bottom: 0.75rem;
  }

  /* Adjust form spacing */
  .form-control,
  .form-select {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* ===================================
   Dark Mode Support (if needed)
   =================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --error-text: #FCA5A5;      /* Red 300 - better contrast on dark */
    --error-bg: #7F1D1D;        /* Red 900 */
    --error-border: #991B1B;    /* Red 800 */
    --error-hover: #FEE2E2;     /* Red 100 */
  }

  .alert-danger {
    background-color: var(--error-bg);
    border-color: var(--error-border);
  }

  .form-control.is-invalid {
    background-color: rgba(127, 29, 29, 0.1);
  }
}

/* ===================================
   Accessibility Enhancements
   =================================== */

/* Screen reader only content */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible for keyboard navigation */
.btn:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible {
  outline: 3px solid var(--fp-primary-blue, #2563EB);
  outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================================
   Print Styles
   =================================== */

@media print {
  .alert {
    border: 2px solid #000;
    page-break-inside: avoid;
  }

  .toast,
  .btn-close {
    display: none;
  }
}