/**
 * Touch Target CSS
 *
 * Touch-screen optimization for TankLogic entity detail pages.
 * Based on WCAG 2.5.5 guidelines: minimum 44x44px touch targets.
 *
 * Usage:
 * - Add .tap-target to any clickable element that needs touch optimization
 * - Use .tab-nav for tab navigation bars
 * - Use .touch-spacing for consistent spacing on touch interfaces
 *
 * @module css/touch-targets
 */

/* ============================================================
   CSS VARIABLES
   ============================================================ */

:root {
  /* Touch target sizes */
  --tap-target-min: 44px;
  --tap-target-comfortable: 48px;

  /* Touch spacing */
  --touch-spacing-xs: 8px;
  --touch-spacing-sm: 12px;
  --touch-spacing-md: 16px;
  --touch-spacing-lg: 24px;

  /* Touch-specific colors (use theme variables when available) */
  --touch-active-bg: rgba(0, 0, 0, 0.1);
  --touch-focus-ring: rgba(59, 130, 246, 0.5);
}

/* Dark mode adjustments */
.dark {
  --touch-active-bg: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   BASE TAP TARGET
   ============================================================ */

.tap-target {
  min-height: var(--tap-target-min);
  min-width: var(--tap-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

/* Active state for tap feedback */
.tap-target:active {
  background-color: var(--touch-active-bg);
  transition: background-color 0.1s ease;
}

/* Focus visible for keyboard navigation */
.tap-target:focus-visible {
  outline: 2px solid var(--touch-focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   TAB NAVIGATION
   ============================================================ */

.tab-nav {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  gap: var(--touch-spacing-xs);
  padding: var(--touch-spacing-xs) 0;
}

.tab-nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.tab-button {
  min-height: var(--tap-target-min);
  min-width: var(--tap-target-min);
  padding: 0 var(--touch-spacing-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.tab-button:active {
  background-color: var(--touch-active-bg);
}

.tab-button.active {
  background-color: var(--primary-color, #3b82f6);
  color: white;
}

/* ============================================================
   TOUCH-FRIENDLY BUTTONS
   ============================================================ */

.touch-btn {
  min-height: var(--tap-target-min);
  min-width: var(--tap-target-min);
  padding: var(--touch-spacing-sm) var(--touch-spacing-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--touch-spacing-xs);
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.touch-btn:active {
  transform: scale(0.97);
}

/* Icon-only button */
.touch-btn-icon {
  min-height: var(--tap-target-min);
  min-width: var(--tap-target-min);
  padding: var(--touch-spacing-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.15s ease;
}

.touch-btn-icon:active {
  background-color: var(--touch-active-bg);
}

/* ============================================================
   TOUCH-FRIENDLY FORM ELEMENTS
   ============================================================ */

/* Input fields */
.touch-input {
  min-height: var(--tap-target-min);
  padding: var(--touch-spacing-sm) var(--touch-spacing-md);
  font-size: 16px; /* Prevents iOS zoom on focus */
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* Select dropdowns */
.touch-select {
  min-height: var(--tap-target-min);
  padding: var(--touch-spacing-sm) var(--touch-spacing-md);
  padding-right: calc(var(--touch-spacing-md) + 24px); /* Space for arrow */
  font-size: 16px;
  border-radius: 8px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--touch-spacing-sm) center;
  background-size: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* Checkbox/radio with larger touch area */
.touch-checkbox-wrapper,
.touch-radio-wrapper {
  min-height: var(--tap-target-min);
  display: inline-flex;
  align-items: center;
  gap: var(--touch-spacing-sm);
  cursor: pointer;
  padding: var(--touch-spacing-xs) var(--touch-spacing-sm);
  -webkit-tap-highlight-color: transparent;
}

.touch-checkbox-wrapper input[type="checkbox"],
.touch-radio-wrapper input[type="radio"] {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

/* ============================================================
   TOUCH-FRIENDLY LIST ITEMS
   ============================================================ */

.touch-list-item {
  min-height: var(--tap-target-min);
  padding: var(--touch-spacing-sm) var(--touch-spacing-md);
  display: flex;
  align-items: center;
  gap: var(--touch-spacing-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.15s ease;
}

.touch-list-item:active {
  background-color: var(--touch-active-bg);
}

/* ============================================================
   TOUCH SPACING UTILITIES
   ============================================================ */

.touch-spacing {
  padding: var(--touch-spacing-md);
}

.touch-gap {
  gap: var(--touch-spacing-md);
}

.touch-gap-sm {
  gap: var(--touch-spacing-sm);
}

.touch-gap-lg {
  gap: var(--touch-spacing-lg);
}

/* ============================================================
   PHOTO GALLERY TOUCH STYLES
   ============================================================ */

.photo-grid-item {
  min-height: var(--tap-target-comfortable);
  min-width: var(--tap-target-comfortable);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.15s ease;
}

.photo-grid-item:active {
  transform: scale(0.97);
}

/* Photo modal navigation */
.photo-nav-btn {
  min-height: var(--tap-target-comfortable);
  min-width: var(--tap-target-comfortable);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.15s ease;
}

.photo-nav-btn:active {
  background: rgba(0, 0, 0, 0.7);
}

/* ============================================================
   SWIPE INDICATOR
   ============================================================ */

.swipe-indicator {
  display: none;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, #666);
  padding: var(--touch-spacing-xs) 0;
}

/* Show swipe indicator on touch devices */
@media (pointer: coarse) {
  .swipe-indicator {
    display: block;
  }
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

/* Larger touch targets on smaller screens */
@media (max-width: 640px) {
  .tap-target,
  .tab-button,
  .touch-btn {
    min-height: var(--tap-target-comfortable);
  }

  .touch-list-item {
    min-height: 56px;
  }
}

/* Ensure adequate spacing between touch elements */
@media (pointer: coarse) {
  .touch-btn + .touch-btn,
  .touch-btn-icon + .touch-btn-icon,
  .tab-button + .tab-button {
    margin-left: var(--touch-spacing-xs);
  }
}