/**
 * SalonFlow - Mobile-first responsive UI/UX
 * PWA-optimized for touch devices
 */

/* === Safe area insets (notched devices) === */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --touch-target: 44px;
  --touch-target-sm: 40px;
}

/* Prevent horizontal overflow */
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

/* === Touch targets (min 44px per WCAG) === */
.touch-target {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.touch-target-sm {
  min-height: var(--touch-target-sm);
  min-width: var(--touch-target-sm);
}

/* Buttons and links as touch targets */
@media (pointer: coarse) {
  a.touch-manipulation,
  button.touch-manipulation,
  [role="button"].touch-manipulation {
    min-height: var(--touch-target);
    padding: 0.75rem 1rem;
  }

  .nav-link-mobile {
    min-height: 48px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
  }
}

/* === Form inputs: 16px prevents iOS zoom on focus === */
@media (max-width: 640px) {
  .form-input,
  .form-select,
  .form-textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px;
    /* padding: 0.75rem 1rem; */
  }

  textarea.form-textarea {
    min-height: 100px;
  }
}

/* === Mobile-first spacing === */
@media (max-width: 639px) {
  .mobile-px-safe {
    padding-left: max(1rem, var(--safe-area-left));
    padding-right: max(1rem, var(--safe-area-right));
  }

  .mobile-py-safe {
    padding-top: max(1rem, var(--safe-area-top));
    padding-bottom: max(1rem, var(--safe-area-bottom));
  }
}

/* === Sidebar: full-width on mobile, proper overlay === */
@media (max-width: 1023px) {
  aside.fixed.inset-y-0.left-0 {
    width: min(320px, 85vw) !important;
    max-width: 100%;
  }
}

/* === Tables: horizontal scroll on mobile === */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .table-responsive {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

.table-responsive table {
  min-width: 600px;
}

/* === Card grid: stack on mobile === */
.mobile-stack > * {
  width: 100%;
}

@media (min-width: 640px) {
  .mobile-stack {
    display: grid;
    gap: 1rem;
  }
  .mobile-stack.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .mobile-stack.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .mobile-stack.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* === Bottom nav safe area (for fixed bottom elements) === */
.pb-safe {
  padding-bottom: max(1rem, var(--safe-area-bottom));
}

/* === Action buttons: full-width on narrow screens === */
@media (max-width: 479px) {
  .btn-mobile-full {
    width: 100%;
    justify-content: center;
  }
}

/* === Hide scrollbar but allow scroll (mobile) === */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* === Active state for touch feedback === */
.touch-feedback:active {
  opacity: 0.9;
  transform: scale(0.98);
}

/* === Navbar: sticky with safe area === */
.navbar-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: var(--safe-area-top);
  background: inherit;
}

/* === Modal/dropdown: max height on mobile === */
@media (max-width: 639px) {
  .dropdown-mobile {
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* === Stat cards: compact on mobile === */
@media (max-width: 639px) {
  .stat-card {
    padding: 1rem;
  }
  .stat-card .text-2xl {
    font-size: 1.25rem;
  }
}

/* === Modal: bottom sheet style on mobile === */
@media (max-width: 639px) {
  .modal-mobile-sheet {
    border-radius: 1rem 1rem 0 0;
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* === Footer/landing links: touch targets === */
@media (pointer: coarse) {
  footer a:not(.touch-target),
  .footer-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0;
  }
}