/* ==============================================================================
   UI Polish Enhancement Styles for HassleFreebooks
   ==============================================================================
   This file contains enhanced UI styles to polish the visual appearance
   and improve user experience across the application. It builds upon
   existing global styles with refined animations, transitions, and visual effects.

   Purpose: Visual refinement and UX enhancement without changing functionality
   Dependencies: Loaded after main.css and app.css via AssetManager

   Design Principles:
   - Subtle animations that enhance without distracting
   - Consistent spacing and visual rhythm
   - Improved focus states for accessibility
   - Premium feel through careful attention to detail
   ============================================================================== */

/* ==============================================================================
   Enhanced Typography & Readability
   ============================================================================== */

/* Improved body text rendering for better readability */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Enhanced heading styles with subtle text shadows for depth */
h1, h2, h3, h4, h5, h6 {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  letter-spacing: -0.01em;
  transition: color var(--animation-fast, 200ms) ease;
}

/* Refined paragraph spacing for improved readability */
p {
  margin-bottom: 1.25em;
  line-height: var(--line-height-relaxed, 1.75);
}

/* Enhanced link styles with smooth underline animation */
a:not(.btn):not(.nav-link) {
  position: relative;
  text-decoration: none;
  transition: color 250ms ease;
}

a:not(.btn):not(.nav-link)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

a:not(.btn):not(.nav-link):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==============================================================================
   Enhanced Form Inputs & Controls
   ============================================================================== */

/* Refined form control styles with improved focus states */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select {
  border: 1px solid var(--border-color, #e5e7eb);
  background-color: var(--bg-color, #ffffff);
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Enhanced focus state with subtle glow */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent-color, #0d9488);
  box-shadow:
    0 0 0 3px rgba(13, 148, 136, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

/* Improved placeholder text styling */
::placeholder {
  color: var(--muted-text, #9ca3af);
  opacity: 0.7;
}

/* Enhanced select dropdown appearance */
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}

/* Custom checkbox and radio button styles */
input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  margin-right: 0.5rem;
  transition: transform 150ms ease;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  transform: scale(1.1);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--accent-color, #0d9488);
}

/* ==============================================================================
   Enhanced Button Styles
   ============================================================================== */

/* Refined button base styles */
.btn {
  position: relative;
  overflow: hidden;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.025em;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

/* Button hover lift effect */
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Button active state */
.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition-duration: 100ms;
}

/* Enhanced primary button with gradient */
.btn-primary {
  background: linear-gradient(135deg, var(--accent-color, #0d9488) 0%, var(--accent-hover, #0f766e) 100%);
  border-color: var(--accent-hover, #0f766e);
  position: relative;
  z-index: 1;
}

/* Primary button shine effect */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s;
  z-index: -1;
}

.btn-primary:hover::before {
  left: 100%;
}

/* Subtle pulse animation for CTA buttons */
.btn-cta {
  animation: subtle-pulse 2s infinite;
}

@keyframes subtle-pulse {
  0%, 100% {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  50% {
    box-shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.2), 0 2px 4px -1px rgba(13, 148, 136, 0.1);
  }
}

/* ==============================================================================
   Enhanced Card Components
   ============================================================================== */

/* Refined card styles with better shadows */
.card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Card hover state with enhanced shadow */
.card:hover {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* Gradient border effect on card hover */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color, #0d9488), var(--accent-light, #5eead4));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.card:hover::before {
  transform: scaleX(1);
}

/* ==============================================================================
   Enhanced Navigation & Header
   ============================================================================== */

/* Refined navigation link styles */
.nav-link {
  position: relative;
  padding: 0.5rem 1rem;
  color: var(--text-color, #1f2937);
  transition: color 250ms ease;
}

/* Navigation active indicator */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: calc(100% - 2rem);
  height: 2px;
  background: var(--accent-color, #0d9488);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* Enhanced dropdown styles */
.dropdown-menu {
  border: 1px solid var(--border-color, #e5e7eb);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-base, 0.375rem);
  padding: 0.5rem 0;
  animation: dropdown-fade-in 200ms ease-out;
}

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

/* ==============================================================================
   Enhanced Tables
   ============================================================================== */

/* Refined table styles */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--card-bg, #ffffff);
  border-radius: var(--radius-base, 0.375rem);
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

/* Table header enhancement */
th {
  background: var(--bg-secondary, #f9fafb);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--muted-text, #6b7280);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

/* Table row hover effect */
tr:hover td {
  background: rgba(13, 148, 136, 0.02);
}

/* Zebra striping for better readability */
tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.01);
}

/* ==============================================================================
   Enhanced Alert & Notification Styles
   ============================================================================== */

/* Refined alert styles */
.alert {
  border-radius: var(--radius-base, 0.375rem);
  border-left: 4px solid;
  padding: 1rem 1.25rem;
  background: var(--card-bg, #ffffff);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  animation: alert-slide-in 300ms ease-out;
}

@keyframes alert-slide-in {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Alert type variations */
.alert-success {
  border-left-color: var(--success-color, #059669);
  background: linear-gradient(90deg, rgba(5, 150, 105, 0.05) 0%, transparent 100%);
}

.alert-warning {
  border-left-color: var(--warning-color, #d97706);
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.05) 0%, transparent 100%);
}

.alert-error,
.alert-danger {
  border-left-color: var(--danger-color, #dc2626);
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.05) 0%, transparent 100%);
}

.alert-info {
  border-left-color: var(--info-color, #0284c7);
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.05) 0%, transparent 100%);
}

/* ==============================================================================
   Enhanced Badge & Tag Styles
   ============================================================================== */

/* Refined badge styles */
.badge,
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.025em;
  border-radius: 9999px;
  transition: all 200ms ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Badge hover effect */
.badge:hover,
.tag:hover {
  transform: scale(1.05);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* ==============================================================================
   Enhanced Modal & Overlay Styles
   ============================================================================== */

/* Refined modal backdrop */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: backdrop-fade-in 200ms ease-out;
}

@keyframes backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Enhanced modal content */
.modal-content {
  border: none;
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  animation: modal-slide-in 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modal-slide-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ==============================================================================
   Loading States & Spinners
   ============================================================================== */

/* Enhanced loading spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color, #e5e7eb);
  border-top-color: var(--accent-color, #0d9488);
  border-radius: 50%;
  animation: spinner-rotate 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Skeleton loading animation */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-secondary, #f3f4f6) 0%,
    var(--border-color, #e5e7eb) 50%,
    var(--bg-secondary, #f3f4f6) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s ease-in-out infinite;
  border-radius: var(--radius-base, 0.375rem);
}

@keyframes skeleton-wave {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ==============================================================================
   Enhanced Tooltips
   ============================================================================== */

/* Refined tooltip styles */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: all 200ms ease;
  pointer-events: none;
  z-index: 10;
}

/* Tooltip content */
[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.5rem 0.75rem;
  background: var(--tooltip-bg, #1f2937);
  color: var(--tooltip-color, #ffffff);
  font-size: 0.875rem;
  border-radius: var(--radius-base, 0.375rem);
  white-space: nowrap;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Tooltip arrow */
[data-tooltip]::after {
  content: '';
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 4px solid transparent;
  border-top-color: var(--tooltip-bg, #1f2937);
}

/* Show tooltip on hover */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ==============================================================================
   Enhanced Focus States for Accessibility
   ============================================================================== */

/* Consistent focus outline for all interactive elements */
:focus-visible {
  outline: 2px solid var(--accent-color, #0d9488);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 0.25rem);
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced skip link for keyboard navigation */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-color, #0d9488);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-base, 0.375rem);
  text-decoration: none;
  font-weight: var(--font-weight-medium, 500);
  z-index: 9999;
  transition: top 200ms ease;
}

.skip-to-content:focus {
  top: 1rem;
}

/* ==============================================================================
   Utility Classes for Quick Styling
   ============================================================================== */

/* Text utilities */
.text-balance {
  text-wrap: balance;
}

.text-gradient {
  background: linear-gradient(135deg, var(--accent-color, #0d9488) 0%, var(--accent-hover, #0f766e) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Shadow utilities */
.shadow-soft {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.shadow-glow {
  box-shadow: 0 0 20px -5px var(--accent-color, #0d9488);
}

/* Animation utilities */
.animate-fade-in {
  animation: fade-in 300ms ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slide-up 300ms ease-out;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover lift effect */
.hover-lift {
  transition: transform 200ms ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
}

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

@media print {
  /* Remove decorative elements */
  .shadow-soft,
  .shadow-glow,
  [data-tooltip]::before,
  [data-tooltip]::after {
    box-shadow: none !important;
  }

  /* Ensure good contrast */
  body {
    color: #000;
    background: #fff;
  }

  /* Show link URLs */
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

/* ==============================================================================
   Dark Mode Support
   ============================================================================== */

@media (prefers-color-scheme: dark) {
  body.theme-system {
    /* Adjust shadows for dark mode */
    --shadow-color: rgba(0, 0, 0, 0.3);
  }

  body.theme-system .card,
  body.theme-dark .card {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  }

  body.theme-system .card:hover,
  body.theme-dark .card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
  }
}

/* ==============================================================================
   Responsive Adjustments
   ============================================================================== */

@media (max-width: 768px) {
  /* Reduce motion on mobile for better performance */
  .hover-lift:hover {
    transform: none;
  }

  /* Simplify card hover effects on mobile */
  .card:hover {
    transform: none;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }

  /* Adjust button sizes for touch targets */
  .btn {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
  }
}