/* ==========================================================================
   Bridge Dealer - Custom Styles
   Built on Tailwind CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Alpine.js Cloaking
   Hide elements with x-cloak until Alpine.js initializes
   -------------------------------------------------------------------------- */

[x-cloak] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   HTMX Indicators
   Loading states for HTMX requests
   -------------------------------------------------------------------------- */

.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-indicator.htmx-request,
.htmx-request .htmx-indicator {
  opacity: 1;
}

/* Top progress bar animation */
#htmx-indicator.htmx-request {
  animation: htmx-progress 1.5s ease-in-out infinite;
}

@keyframes htmx-progress {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  50.1% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* --------------------------------------------------------------------------
   Typography Utilities
   -------------------------------------------------------------------------- */

/* Line clamp for text truncation */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Smooth Scroll
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Focus States
   Better visibility for keyboard navigation
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid #14b8a6;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Form Enhancements
   -------------------------------------------------------------------------- */

/* Remove default focus outline for styled form elements */
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* Autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #18181b;
  -webkit-box-shadow: 0 0 0px 1000px #f0fdfa inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* --------------------------------------------------------------------------
   Django Message Tag Mapping (Legacy support)
   Maps Django message tags to component variants
   -------------------------------------------------------------------------- */

/* These classes are for backwards compatibility with Django messages */
.alert-debug {
  --alert-bg: #fafafa;
  --alert-border: #e4e4e7;
  --alert-text: #3f3f46;
}

.alert-info {
  --alert-bg: #f0f9ff;
  --alert-border: #bae6fd;
  --alert-text: #0369a1;
}

.alert-success {
  --alert-bg: #f0fdf4;
  --alert-border: #bbf7d0;
  --alert-text: #166534;
}

.alert-warning {
  --alert-bg: #fffbeb;
  --alert-border: #fde68a;
  --alert-text: #92400e;
}

.alert-error {
  --alert-bg: #fef2f2;
  --alert-border: #fecaca;
  --alert-text: #991b1b;
}

/* --------------------------------------------------------------------------
   Custom Scrollbar (Optional)
   Subtle scrollbar styling for webkit browsers
   -------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1aa;
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */

@media print {
  nav,
  footer,
  .no-print {
    display: none !important;
  }

  body {
    background: white !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }
}