/**
 * SIGV Public Tracking Styles
 * Tailwind-based styles for public tracking interface
 * 
 * @package Vextra_SIGV
 */

/* ============================================
   Base Tracking Container
   ============================================ */
.sigv-tracking-wrapper {
	@apply w-full max-w-4xl mx-auto p-6;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sigv-tracking-container {
	@apply bg-white rounded-lg shadow-lg overflow-hidden;
}

/* ============================================
   Header Section
   ============================================ */
.sigv-tracking-header {
	@apply bg-gradient-to-r from-blue-600 to-blue-700 text-white p-8 text-center;
}

.sigv-tracking-title {
	@apply text-3xl font-bold mb-2;
}

.sigv-tracking-help {
	@apply text-blue-100 text-sm mt-2;
}

/* ============================================
   Search Form
   ============================================ */
.sigv-tracking-form {
	@apply p-8;
}

.sigv-form-group {
	@apply flex gap-3;
}

.sigv-tracking-input {
	@apply flex-1 px-4 py-3 border-2 border-gray-300 rounded-lg text-lg;
	@apply focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200;
	@apply transition-all duration-200;
	@apply disabled:bg-gray-100 disabled:cursor-not-allowed;
}

.sigv-tracking-input::placeholder {
	@apply text-gray-400;
}

.sigv-tracking-button {
	@apply px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg;
	@apply hover:bg-blue-700 active:bg-blue-800;
	@apply focus:outline-none focus:ring-4 focus:ring-blue-300;
	@apply transition-all duration-200;
	@apply disabled:bg-gray-400 disabled:cursor-not-allowed;
	@apply flex items-center gap-2 justify-center;
	min-width: 140px;
}

.sigv-tracking-button.sigv-button-loading {
	@apply bg-blue-500 cursor-wait;
}

.sigv-spinner {
	@apply flex items-center gap-2;
}

/* ============================================
   Alert Messages
   ============================================ */
.sigv-alert {
	@apply mx-8 mb-6 p-4 rounded-lg flex items-start gap-3;
}

.sigv-alert-error {
	@apply bg-red-50 border-l-4 border-red-500 text-red-800;
}

.sigv-alert-icon {
	@apply w-5 h-5 flex-shrink-0 mt-0.5;
}

/* ============================================
   Tracking Results
   ============================================ */
.sigv-tracking-results {
	@apply p-8 pt-0;
}

.sigv-shipment-info {
	@apply bg-gray-50 rounded-lg p-6 mb-6;
}

.sigv-info-grid {
	@apply grid grid-cols-1 md:grid-cols-2 gap-4;
}

.sigv-info-item {
	@apply flex flex-col;
}

.sigv-info-label {
	@apply text-xs uppercase tracking-wide text-gray-500 font-semibold mb-1;
}

.sigv-info-value {
	@apply text-gray-900 font-medium text-lg;
}

.sigv-code {
	@apply font-mono bg-white px-3 py-1 rounded border border-gray-200 inline-block;
}

/* ============================================
   Status Badges
   ============================================ */
.sigv-badge {
	@apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold;
}

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

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

.sigv-badge-in-transit {
	@apply bg-purple-100 text-purple-800;
}

.sigv-badge-out-delivery {
	@apply bg-indigo-100 text-indigo-800;
}

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

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

.sigv-badge-returned {
	@apply bg-orange-100 text-orange-800;
}

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

.sigv-badge-default {
	@apply bg-gray-100 text-gray-600;
}

/* ============================================
   Timeline
   ============================================ */
.sigv-timeline-wrapper {
	@apply mt-8;
}

.sigv-timeline-title {
	@apply text-xl font-bold text-gray-900 mb-4;
}

.sigv-timeline {
	@apply space-y-6;
}

.sigv-timeline-item {
	@apply flex gap-4;
}

.sigv-timeline-marker {
	@apply flex flex-col items-center;
}

.sigv-timeline-dot {
	@apply w-4 h-4 rounded-full bg-gray-300 flex-shrink-0;
	@apply transition-all duration-300;
}

.sigv-timeline-dot.sigv-dot-active {
	@apply bg-blue-600 ring-4 ring-blue-200;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

.sigv-timeline-line {
	@apply w-0.5 bg-gray-200 flex-grow mt-2;
	min-height: 40px;
}

.sigv-timeline-content {
	@apply flex-1 pb-6;
}

.sigv-timeline-date {
	@apply text-sm text-gray-500 font-medium mb-1;
}

.sigv-timeline-status {
	@apply text-gray-900 font-semibold mb-2;
}

.sigv-timeline-location {
	@apply flex items-center gap-1 text-sm text-gray-600;
}

.sigv-location-icon {
	@apply w-4 h-4 text-gray-400;
}

/* ============================================
   No Events State
   ============================================ */
.sigv-no-events {
	@apply text-center py-12 text-gray-400;
}

.sigv-no-events-icon {
	@apply w-16 h-16 mx-auto mb-4 text-gray-300;
}

.sigv-no-events p {
	@apply text-gray-500;
}

/* ============================================
   Dark Theme Variant
   ============================================ */
.sigv-tracking-dark .sigv-tracking-container {
	@apply bg-gray-800;
}

.sigv-tracking-dark .sigv-tracking-header {
	@apply from-gray-900 to-gray-800;
}

.sigv-tracking-dark .sigv-tracking-input {
	@apply bg-gray-700 border-gray-600 text-white;
	@apply focus:border-blue-400;
}

.sigv-tracking-dark .sigv-shipment-info {
	@apply bg-gray-700;
}

.sigv-tracking-dark .sigv-info-label {
	@apply text-gray-400;
}

.sigv-tracking-dark .sigv-info-value {
	@apply text-gray-100;
}

.sigv-tracking-dark .sigv-code {
	@apply bg-gray-800 border-gray-600 text-gray-100;
}

.sigv-tracking-dark .sigv-timeline-title {
	@apply text-gray-100;
}

.sigv-tracking-dark .sigv-timeline-status {
	@apply text-gray-100;
}

.sigv-tracking-dark .sigv-timeline-date,
.sigv-tracking-dark .sigv-timeline-location {
	@apply text-gray-400;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
	.sigv-tracking-wrapper {
		@apply p-4;
	}

	.sigv-tracking-header {
		@apply p-6;
	}

	.sigv-tracking-title {
		@apply text-2xl;
	}

	.sigv-tracking-form {
		@apply p-6;
	}

	.sigv-form-group {
		@apply flex-col;
	}

	.sigv-tracking-button {
		@apply w-full;
	}

	.sigv-tracking-results {
		@apply p-6 pt-0;
	}

	.sigv-info-grid {
		@apply grid-cols-1;
	}
}

/* ============================================
   Animation Classes
   ============================================ */
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sigv-tracking-results {
	animation: slideIn 0.4s ease-out;
}

.sigv-timeline-item {
	animation: slideIn 0.3s ease-out backwards;
}

.sigv-timeline-item:nth-child(1) { animation-delay: 0.05s; }
.sigv-timeline-item:nth-child(2) { animation-delay: 0.1s; }
.sigv-timeline-item:nth-child(3) { animation-delay: 0.15s; }
.sigv-timeline-item:nth-child(4) { animation-delay: 0.2s; }
.sigv-timeline-item:nth-child(5) { animation-delay: 0.25s; }

/* ============================================
   Print Styles
   ============================================ */
@media print {
	.sigv-tracking-form,
	.sigv-tracking-button {
		@apply hidden;
	}

	.sigv-tracking-container {
		@apply shadow-none;
	}

	.sigv-timeline-dot.sigv-dot-active {
		animation: none;
	}
}

/* ========================================================================
   PUBLIC TRACKING PAGE STYLES
   ======================================================================== */

.sigv-tracking-page {
  min-height: 80vh;
  padding: 40px 20px;
  background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
}

.sigv-tracking-container {
  max-width: 900px;
  margin: 0 auto;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* Error State */
.sigv-tracking-error {
  text-align: center;
  padding: 60px 40px;
}

.sigv-tracking-error__icon {
  color: #ef4444;
  margin-bottom: 24px;
}

.sigv-tracking-error h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 16px 0;
}

.sigv-tracking-error p {
  font-size: 16px;
  color: #6b7280;
  margin: 0 0 32px 0;
  line-height: 1.6;
}

.sigv-tracking-btn {
  display: inline-block;
  padding: 12px 32px;
  background: #0EA5E9;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.sigv-tracking-btn:hover {
  background: #0284C7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

/* Header */
.sigv-tracking-header {
  background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
  padding: 40px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.sigv-tracking-header__code h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 8px 0 0 0;
  color: white;
}

.sigv-tracking-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sigv-tracking-status {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.sigv-tracking-status__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sigv-tracking-status--delivered .sigv-tracking-status__icon {
  color: #0891B2;
}

.sigv-tracking-status--in-transit .sigv-tracking-status__icon {
  color: #0EA5E9;
}

.sigv-tracking-status--pending .sigv-tracking-status__icon {
  color: #06B6D4;
}

/* Ready for Pickup */
.sigv-tracking-status--ready-for-pickup .sigv-tracking-status__icon {
  color: #14B8A6; /* teal-500 */
}

.sigv-tracking-status__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sigv-tracking-status__label {
  font-size: 12px;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sigv-tracking-status__value {
  font-size: 18px;
  font-weight: 700;
}

/* Info Grid */
.sigv-tracking-info {
  padding: 40px;
  border-bottom: 1px solid #e5e7eb;
}

/* Layout de linhas */
.sigv-tracking-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.sigv-tracking-info-row:last-child {
  margin-bottom: 0;
}

.sigv-tracking-info-row--full {
  grid-template-columns: 1fr;
}

.sigv-tracking-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}

.sigv-tracking-info-item--full {
  grid-column: 1 / -1;
}

.sigv-tracking-info-item svg {
  flex-shrink: 0;
  color: #6b7280;
  margin-top: 2px;
}

.sigv-tracking-info-item__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sigv-tracking-info-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sigv-tracking-info-value {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

/* Estimated Delivery Date Styles */
.sigv-estimated-date {
  color: #0891B2 !important;
  font-weight: 700;
}

.sigv-not-available {
  color: #6b7280 !important;
  font-style: italic;
  font-weight: 500;
}

/* Timeline */
.sigv-tracking-timeline {
  padding: 40px;
}

.sigv-tracking-timeline h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 32px 0;
}

.sigv-tracking-timeline__list {
  position: relative;
  padding-left: 40px;
}

.sigv-tracking-timeline__list::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
}

.sigv-tracking-timeline__item {
  position: relative;
  margin-bottom: 32px;
}

.sigv-tracking-timeline__item:last-child {
  margin-bottom: 0;
}

.sigv-tracking-timeline__dot {
  position: absolute;
  left: -36px;
  top: 4px;
  width: 16px;
  height: 16px;
  background: white;
  border: 3px solid #0EA5E9;
  border-radius: 50%;
  z-index: 1;
}

.sigv-tracking-timeline__item:first-child .sigv-tracking-timeline__dot {
  background: #0EA5E9;
}

.sigv-tracking-timeline__content {
  background: #f9fafb;
  padding: 16px 20px;
  border-radius: 8px;
  border-left: 3px solid #0EA5E9;
}

.sigv-tracking-timeline__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 16px;
}

.sigv-tracking-timeline__status {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.sigv-tracking-timeline__date {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.sigv-tracking-timeline__description {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 8px 0;
}

.sigv-tracking-timeline__location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

.sigv-tracking-timeline__location svg {
  flex-shrink: 0;
}

/* No History State */
.sigv-tracking-no-history {
  text-align: center;
  padding: 60px 40px;
  color: #6b7280;
}

.sigv-tracking-no-history svg {
  margin: 0 auto 24px;
  opacity: 0.5;
}

.sigv-tracking-no-history p {
  font-size: 16px;
  margin: 0;
}

/* ============================================
   Mensagens Contextuais
   ============================================ */

/* Container de Mensagens */
.sigv-tracking-messages {
  padding: 0 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Mensagem Base */
.sigv-message {
  position: relative;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  animation: sigvMessageSlideIn 0.3s ease-out;
  transition: all 0.3s ease;
}

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

/* Tipos de Mensagens */
.sigv-message--info {
  background: #EFF6FF;
  border-left-color: #3B82F6;
  color: #1E40AF;
}

.sigv-message--success {
  background: #F0FDF4;
  border-left-color: #22C55E;
  color: #166534;
}

.sigv-message--warning {
  background: #FFFBEB;
  border-left-color: #F59E0B;
  color: #92400E;
}

.sigv-message--alert {
  background: #FEF2F2;
  border-left-color: #EF4444;
  color: #991B1B;
}

/* Conteúdo da Mensagem */
.sigv-message__content {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sigv-message__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sigv-message__icon svg {
  width: 100%;
  height: 100%;
}

.sigv-message__text {
  flex: 1;
  min-width: 0;
}

.sigv-message__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.sigv-message__body {
  font-size: 14px;
  line-height: 1.6;
}

.sigv-message__body p {
  margin: 0 0 12px 0;
}

.sigv-message__body p:last-child {
  margin-bottom: 0;
}

.sigv-message__body ul,
.sigv-message__body ol {
  margin: 0 0 12px 0;
  padding-left: 20px;
}

.sigv-message__body li {
  margin-bottom: 4px;
}

/* Botão de Ação */
.sigv-message__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sigv-message__action svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sigv-message__action:hover svg {
  transform: translateX(3px);
}

.sigv-message--info .sigv-message__action {
  background: #3B82F6;
  color: white;
}

.sigv-message--info .sigv-message__action:hover {
  background: #2563EB;
}

.sigv-message--success .sigv-message__action {
  background: #22C55E;
  color: white;
}

.sigv-message--success .sigv-message__action:hover {
  background: #16A34A;
}

.sigv-message--warning .sigv-message__action {
  background: #F59E0B;
  color: white;
}

.sigv-message--warning .sigv-message__action:hover {
  background: #D97706;
}

.sigv-message--alert .sigv-message__action {
  background: #EF4444;
  color: white;
}

.sigv-message--alert .sigv-message__action:hover {
  background: #DC2626;
}

/* Botão de Dispensar */
.sigv-message__dismiss {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease, background 0.2s ease;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.sigv-message__dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
}

.sigv-message__dismiss:active {
  transform: scale(0.95);
}

.sigv-message__dismiss svg {
  display: block;
}

/* Animação de saída */
.sigv-message--dismissing {
  opacity: 0;
  transform: translateX(100%);
}

/* Responsive */
@media (max-width: 768px) {
  .sigv-tracking-page {
    padding: 20px 16px;
  }

  .sigv-tracking-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  .sigv-tracking-header__code h1 {
    font-size: 24px;
  }

  .sigv-tracking-status {
    width: 100%;
  }

  .sigv-tracking-info {
    padding: 24px;
  }

  .sigv-tracking-info-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sigv-tracking-timeline {
    padding: 24px;
  }

  .sigv-tracking-timeline__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Mensagens - Mobile */
  .sigv-tracking-messages {
    padding: 0 24px 24px;
    gap: 12px;
  }

  .sigv-message {
    padding: 16px;
  }

  .sigv-message__content {
    flex-direction: column;
    gap: 12px;
  }

  .sigv-message__icon {
    width: 20px;
    height: 20px;
  }

  .sigv-message__title {
    font-size: 14px;
  }

  .sigv-message__body {
    font-size: 13px;
  }

  .sigv-message__action {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
  }

  .sigv-message__dismiss {
    top: 12px;
    right: 12px;
  }
}