/**
 * Mexal Theme - Ottimizzazioni tablet e touch
 * Breakpoint tablet: 768px (md) - 1024px (lg)
 */

/* ========== Safe area (notch, home indicator) ========== */
.safe-area-t {
  padding-top: env(safe-area-inset-top, 0);
}
.safe-area-b {
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.safe-area-l {
  padding-left: env(safe-area-inset-left, 0);
}
.safe-area-r {
  padding-right: env(safe-area-inset-right, 0);
}

/* ========== Touch-friendly (min 44px target, no delay) ========== */
.input-touch,
.btn-touch {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (min-width: 768px) {
  .input-touch {
    min-height: 48px;
  }
  .btn-touch {
    min-height: 48px;
  }
}

/* Riduce ritardo doppio tap su iOS */
button, a, [role="button"], input, select, textarea, label[for] {
  touch-action: manipulation;
}

/* ========== Layout tablet: contenuto centrato e leggibile ========== */
@media (min-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  body {
    /* Evita zoom involontario su input focus (iOS) se font-size < 16px */
    font-size: 16px;
  }
}

/* ========== Flash messages: posizione sicura su tablet ========== */
@media (min-width: 768px) {
  .fixed.top-4.right-4 {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    max-width: min(400px, calc(100vw - 2rem));
  }
}

/* ========== Login card: ombra e bordo su tablet ========== */
@media (min-width: 768px) {
  .login-collapse form {
    margin-bottom: 0;
  }
}

/* ========== Login reparto produzione: massima semplicità ========== */
.login-card-production {
  /* Leggibilità in ambiente fabbrica (illuminazione variabile) */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.input-production {
  background-color: #fafafa;
}
.input-production:focus {
  background-color: #fff;
}

/* Pulsante Accedi: verde = azione positiva, alto contrasto */
.btn-login-production {
  background-color: #15803d;
  min-height: 52px;
}
.btn-login-production:hover {
  background-color: #166534;
}
.btn-login-production:active {
  background-color: #14532d;
}
@media (min-width: 768px) {
  .btn-login-production {
    min-height: 56px;
  }
}

/* ========== Utility: preferenza riduzione movimento ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}