/* ====================================
   ADDRESS FORM LAYOUTS
   ==================================== */

/* Address form grid container */
.address-form-grid {
  display: grid;
  gap: 1rem;
}

/* Full-width address rows (name, address lines, country) */
.address-row-full {
  grid-column: 1 / -1;
}

/* City, State, ZIP row - single line on full screens */
.address-row-city-state-zip {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  grid-column: 1 / -1;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .address-row-city-state-zip {
    grid-template-columns: 1fr;
  }
}

/* ====================================
   FORM LAYOUT PATTERNS
   ==================================== */

/* Centered form container (max 700px) */
.form-container-centered {
  max-width: 700px;
  margin: 0 auto;
}

/* Two-column form layout */
.form-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 992px) {
  .form-two-column {
    grid-template-columns: 1fr;
  }
}

/* Form with sidebar layout */
.form-sidebar-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
}

@media (max-width: 992px) {
  .form-sidebar-layout {
    grid-template-columns: 1fr;
  }
}

/* ====================================
   PERFORMANCE & MOBILE OPTIMIZATIONS
   ==================================== */

/* Focus styles for accessibility (keyboard navigation) */
.pro-admin .pa-btn:focus-visible,
.pro-merchant .pa-btn:focus-visible,
.pro-admin .pa-input:focus-visible,
.pro-merchant .pa-input:focus-visible,
.pro-admin .pa-select:focus-visible,
.pro-merchant .pa-select:focus-visible {
  outline: 2px solid var(--pa-primary);
  outline-offset: 2px;
}

/* Remove focus outline for mouse users */
.pro-admin .pa-btn:focus:not(:focus-visible),
.pro-merchant .pa-btn:focus:not(:focus-visible),
.pro-admin .pa-input:focus:not(:focus-visible),
.pro-merchant .pa-input:focus:not(:focus-visible) {
  outline: none;
}

/* Table responsive wrapper */
.pro-admin .pa-table-wrapper,
.pro-merchant .pa-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tablet and mobile improvements */
@media (max-width: 1024px) {
  /* Better spacing on tablets */
  .demo-content {
    padding: 1.25rem;
  }

  /* Ensure cards stack nicely */
  .demo-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile and small tablet specific */
@media (max-width: 768px) {
  /* Ensure tables don't break layout */
  .pro-admin .pa-table,
  .pro-merchant .pa-table {
    min-width: 600px;
  }

  /* Increase font sizes for better readability */
  .pro-admin .pa-badge,
  .pro-merchant .pa-badge {
    font-size: 0.8125rem; /* 13px minimum */
  }

  .pro-admin .pa-helper,
  .pro-merchant .pa-helper,
  .pro-admin .pa-error,
  .pro-merchant .pa-error {
    font-size: 0.8125rem; /* 13px minimum */
  }

  .pro-admin .pa-table td,
  .pro-merchant .pa-table td {
    font-size: 0.9375rem; /* 15px on mobile */
  }

  /* Improve form spacing on mobile */
  .pro-admin .pa-form-grid,
  .pro-merchant .pa-form-grid {
    gap: 1.25rem;
  }

  /* Hide user type badge in header on mobile */
  .header-brand .user-type {
    display: none;
  }

  /* Larger touch target for user menu on mobile */
  .sidebar-user-toggle {
    min-height: 52px;
  }
}

/* Large tablets in landscape */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Optimal sidebar width for tablets */
  .pro-admin,
  .pro-merchant {
    --pa-sidebar-width: 220px;
  }

  /* Two-column grids on tablets */
  .demo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Touch-friendly targets for touch devices */
@media (pointer: coarse) {
  /* Minimum 44x44px touch targets */
  .pro-admin .pa-btn-sm,
  .pro-merchant .pa-btn-sm {
    min-height: 44px;
    padding: 0.5rem 0.85rem;
  }

  .pro-admin .pa-pagination-btn,
  .pro-merchant .pa-pagination-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
  }

  .pro-admin .pa-modal-close,
  .pro-merchant .pa-modal-close {
    min-width: 44px;
    min-height: 44px;
  }

  .pro-admin .pa-dropdown-toggle,
  .pro-merchant .pa-dropdown-toggle {
    min-height: 44px;
  }

  .pro-admin .pa-menu-item,
  .pro-merchant .pa-menu-item {
    min-height: 44px;
  }

  /* Larger tap targets for interactive elements */
  .pro-admin .pa-tab,
  .pro-merchant .pa-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}