/* Mobile Optimizations */

@media (max-width: 767px) {
  /* Touch-friendly button sizes */
  button,
  .btn,
  .admin-btn,
  input[type="button"],
  input[type="submit"],
  .btn-group .btn,
  .button-group .btn,
  .action-buttons .btn {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* Touch-friendly input fields */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  textarea,
  select,
  .field-input {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 16px;
  }

  /* Better form spacing */
  .field,
  .field-group {
    margin-bottom: 16px;
    width: 100%;
  }

  .field label,
  .field-label {
    margin-bottom: 8px;
    font-size: 13px;
  }

  /* Better link/touch targets */
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
  }

  /* Improve readability */
  body {
    font-size: 16px;
    line-height: 1.6;
  }

  h1 {
    font-size: clamp(20px, 6vw, 28px);
  }

  h2 {
    font-size: clamp(18px, 5vw, 24px);
  }

  h3 {
    font-size: clamp(16px, 4vw, 20px);
  }

  p {
    line-height: 1.6;
    font-size: 15px;
  }

  /* Better spacing on small screens */
  .container,
  .content,
  .main-content,
  .page,
  .panel {
    padding: 12px 16px;
  }

  /* Stack layouts vertically on mobile */
  .grid-2,
  .grid-auto {
    grid-template-columns: 1fr;
  }

  .row-layout,
  .responsive-row,
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .row-layout > *,
  .responsive-row > * {
    width: 100%;
  }

  /* Better card spacing */
  .card,
  .panel,
  .page-card,
  .row-card {
    margin-bottom: 12px;
  }

  /* Improve modal/overlay usability */
  .modal,
  .dialog,
  .popup {
    width: 100% !important;
    max-width: calc(100% - 32px) !important;
    margin: auto !important;
  }

  /* Better select box styling for mobile */
  select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' 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 10px center;
    background-size: 20px;
    padding-right: 36px;
  }

  /* Remove hover effects on touch devices */
  @media (hover: none) {
    button:hover,
    .btn:hover,
    a:hover {
      transform: none;
      opacity: 0.9;
    }
  }
}

@media (max-width: 480px) {
  /* Extra small screen adjustments */
  button,
  .btn,
  input[type="button"],
  input[type="submit"] {
    padding: 12px 14px;
    font-size: 15px;
    min-height: 44px;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px;
  }

  .container,
  .panel,
  .page {
    padding: 8px 12px;
  }

  h1 {
    font-size: clamp(18px, 5vw, 24px);
  }

  h2 {
    font-size: clamp(16px, 4vw, 20px);
  }

  .grid-2,
  .grid-3,
  .grid-auto {
    grid-template-columns: 1fr;
  }

  /* Adjust toolbar for small screens */
  .toolbar {
    flex-direction: column;
    gap: 8px;
  }

  .toolbar-actions {
    width: 100%;
    flex-direction: column;
  }

  .toolbar .btn,
  .toolbar-actions .btn {
    width: 100%;
  }

  /* Better list spacing */
  .item-row,
  .row-card {
    padding: 12px 10px;
    gap: 8px;
  }

  /* Improve data field sizing */
  .par-field,
  .qty-field {
    flex: 1 1 auto;
    min-width: 60px;
  }

  /* Remove horizontal scrolling */
  body,
  html {
    overflow-x: hidden;
  }

  table {
    font-size: 13px;
  }

  th,
  td {
    padding: 8px;
  }
}

/* Safe area adjustments for notched devices */
@supports (padding: max(0px)) {
  body {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  .modal,
  .dialog {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Improve touch feedback */
button,
.btn,
a,
input[type="button"],
input[type="submit"] {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Improve text rendering on mobile */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent zoom on input focus */
input,
textarea,
select {
  font-size: 16px;
}