/* Draft Estimator - Professional Light Theme Styles */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Clean number inputs */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Focus states */
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Smooth transitions */
button,
input,
textarea {
  transition: all 0.1s ease-in-out;
}

/* Print optimizations */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  
  header,
  aside,
  [data-action] {
    display: none !important;
  }
}

/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#estimator-app {
  animation: fadeIn 0.3s ease-out;
}

/* Professional scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Button interactions */
button:not(:disabled):hover {
  transform: translateY(-1px);
}

button:not(:disabled):active {
  transform: translateY(0);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form input states */
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f9fafb;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  [data-item-id] {
    grid-template-columns: 1fr !important;
  }
  
  [data-item-id] > div {
    width: 100% !important;
  }
}

/* Item slide-in animation */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

[data-item-id] {
  animation: slideIn 0.2s ease-out;
}

/* Tabular numbers for better alignment */
[data-item-id] input {
  font-variant-numeric: tabular-nums;
}

/* Selection styling */
::selection {
  background-color: rgba(59, 130, 246, 0.2);
  color: inherit;
}

/* Loading spinner */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ============================================
   LOGIN BUTTON LOADING ANIMATION
   ============================================ */

/* Progress bar animation */
@keyframes loginProgress {
  0% {
    width: 0%;
  }
  20% {
    width: 20%;
  }
  50% {
    width: 50%;
  }
  80% {
    width: 80%;
  }
  100% {
    width: 95%;
  }
}

/* Shimmer effect for the button */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Login button loading state */
.login-btn.loading {
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #2563eb 0%,
    #3b82f6 25%,
    #60a5fa 50%,
    #3b82f6 75%,
    #2563eb 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.login-btn.loading .btn-text {
  display: none;
}

.login-btn.loading .btn-loading {
  display: flex !important;
}

.login-btn.loading .btn-progress {
  animation: loginProgress 3s ease-out forwards;
}

/* Professional shadows */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Improved spacing and readability */
body {
  font-size: 15px;  /* INCREASED from 14px for better readability */
}

/* Better readability */
input,
textarea {
  line-height: 1.4;
}

/* ============================================
   iOS SAFARI AUTO-ZOOM PREVENTION
   iOS Safari auto-zooms on inputs with font-size < 16px
   This ensures ALL form elements are at least 16px on ALL devices
   
   IMPORTANT: This applies to ALL touch devices including iPad
   The 16px minimum prevents the page from zooming when users
   tap into input fields on iOS Safari and iPad Safari
   ============================================ */

/* Global minimum font-size for all form elements */
input,
textarea,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
.ai-popup-input {
  font-size: 16px !important;
  /* Disable iOS text size adjustment */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Touch device specific - ensures zoom prevention on all iOS/iPadOS */
@supports (-webkit-touch-callout: none) {
  /* iOS/iPadOS specific styles */
  input,
  textarea,
  select {
    font-size: 16px !important;
    /* Prevent zoom on focus */
    transform-origin: left top;
  }
}

/* Additional safeguard using touch media query */
@media (hover: none) and (pointer: coarse) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Prevent double-tap zoom and pinch zoom on inputs (iOS Safari) */
input,
textarea,
select,
button {
  touch-action: manipulation;
}

/* Consistent border radius */
.rounded-md {
  border-radius: 0.375rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}