/* Devise Authentication Pages Styling - Matching OffscriptClient React Native App */

@layer base {
  /* Base Body Styling */
  body {
    font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer components {
  /* Button Hover States */
  input[type="submit"]:hover,
  button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(113, 64, 243, 0.3);
  }

  input[type="submit"]:active,
  button:active {
    transform: translateY(0);
  }

  /* Link Hover States */
  a {
    transition: color 0.2s ease-in-out;
  }

  a:hover {
    opacity: 0.8;
  }

  /* Checkbox Styling */
  input[type="checkbox"]:checked {
    background-color: theme('colors.offscript.primary');
    border-color: theme('colors.offscript.primary');
  }

  input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(113, 64, 243, 0.1);
  }

  /* Error Message Styling */
  .field_with_errors {
    display: inline;
  }

  .field_with_errors input {
    @apply border-red-500;
  }

  /* Flash Messages */
  .alert {
    @apply py-4 px-6 rounded-offscript mb-6;
  }

  .alert-error,
  .alert-alert {
    @apply bg-red-50 border border-red-500 text-red-500;
  }

  .alert-notice,
  .alert-success {
    @apply bg-green-50 border border-green-600 text-green-600;
  }
}

@layer utilities {
  /* Smooth Transitions */
  * {
    transition: border-color 0.15s ease-in-out;
  }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  body {
    padding: 0;
  }

  /* Adjust form spacing on mobile */
  input[type="email"],
  input[type="password"],
  input[type="text"] {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }

  /* Adjust button sizes on mobile */
  input[type="submit"],
  button {
    min-height: 48px;
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  input[type="email"],
  input[type="password"],
  input[type="text"] {
    font-size: 16px;
  }
}