/* ==========================================================================
   MINTORA - Global Responsive & Mobile Fixes
   Complete mobile/tablet compatibility layer
   ========================================================================== */

/* ============================================================================
   FOUNDATION - Prevent all horizontal overflow issues
   ============================================================================ */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
}

#__next,
main,
.app-wrapper {
  overflow-x: hidden;
  width: 100%;
}

/* ============================================================================
   CUSTOM SCROLLBAR - Beautiful, consistent across all browsers
   ============================================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.4) transparent;
}

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

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.4);
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.6);
}

/* Hide scrollbar on mobile for cleaner look */
@media (max-width: 768px) {
  *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  
  .hide-scrollbar-mobile {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .hide-scrollbar-mobile::-webkit-scrollbar {
    display: none;
  }
}

/* ============================================================================
   SAFE AREAS - iPhone notch & gesture areas
   ============================================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }
}

/* ============================================================================
   MODAL FIXES - All modals properly contained on mobile
   ============================================================================ */

/* Base modal overlay fix - applies to all screen sizes */
.card-modal-overlay,
.add-card-modal__overlay,
[class*="modal-overlay"],
[class*="modal__overlay"] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ========== MOBILE ONLY - Full screen modals ========== */
@media (max-width: 768px) {
  /* Full-screen modals on mobile */
  .card-modal-overlay,
  .add-card-modal__overlay {
    padding: 0;
    align-items: flex-end;
  }
  
  .card-modal,
  .add-card-modal {
    max-width: 100%;
    max-height: 95vh;
    max-height: 95dvh;
    margin: 0;
    border-radius: 24px 24px 0 0;
    animation: slideUpMobile 0.3s ease-out;
  }
  
  @keyframes slideUpMobile {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Modal close button always visible and touchable */
  .card-modal__close,
  .add-card-modal__close {
    position: sticky;
    top: 0;
    right: 0;
    z-index: 10;
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Modal content scrollable */
  .card-modal__content,
  .add-card-modal__content {
    max-height: calc(95vh - 80px);
    max-height: calc(95dvh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Card modal specific - stack layout */
  .card-modal__content {
    flex-direction: column !important;
    padding: 1rem !important;
  }
  
  .card-modal__preview {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .card-modal__image-container {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  
  .card-modal__image-toggle {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
  }
  
  .card-modal__details {
    width: 100%;
    max-height: none;
    overflow-y: visible;
  }
  
  .card-modal__title {
    font-size: 1.25rem !important;
  }
  
  .card-modal__stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  
  .card-modal__actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .card-modal__btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 120px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .card-modal__stats-grid {
    grid-template-columns: 1fr !important;
  }
  
  .card-modal__field-row {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   HEADER MOBILE MENU SUPPORT
   ============================================================================ */

/* Mobile menu toggle button - shown on mobile and tablet */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-toggle:active {
  transform: scale(0.95);
}

@media (max-width: 1024px) {
  .mobile-menu-toggle {
    display: flex;
  }
}

/* Mobile navigation overlay */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile navigation panel */
.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 280px;
  max-width: calc(100vw - 60px);
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 15, 30, 0.99) 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-panel.active {
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 0.25rem;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.mobile-nav-link.active {
  background: rgba(99, 102, 241, 0.1);
  color: white;
}

.mobile-nav-link svg {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.mobile-nav-divider {
  height: 1px;
  margin: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================================
   COLLECTION PAGE - Sidebar & Layout Fixes
   ============================================================================ */

/* Portfolio sidebar mobile */
@media (max-width: 1024px) {
  .collection-page--with-sidebar {
    flex-direction: column;
  }
  
  .portfolio-sidebar {
    width: 100% !important;
    height: auto !important;
    max-height: none;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1rem;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  
  .portfolio-sidebar__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .portfolio-item {
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 220px;
  }
  
  .portfolio-item__content {
    min-width: 0;
  }
  
  .portfolio-item__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .portfolio-item__actions {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .portfolio-sidebar {
    padding: 0.75rem;
  }
  
  .portfolio-item {
    min-width: 160px;
    padding: 0.625rem;
  }
  
  .portfolio-item__icon {
    width: 32px;
    height: 32px;
  }
  
  .portfolio-item__name {
    font-size: 0.85rem;
  }
  
  .portfolio-item__meta {
    font-size: 0.7rem;
  }
}

/* Collection main area */
@media (max-width: 768px) {
  .collection-main {
    padding: 1rem !important;
  }
  
  .collection-header {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .collection-header__title {
    font-size: 1.5rem;
  }
  
  .collection-header__actions {
    width: 100%;
    justify-content: stretch;
  }
  
  .collection-header__actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* Stats cards responsive */
@media (max-width: 1200px) {
  .collection-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .collection-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .stat-card__icon {
    width: 40px;
    height: 40px;
  }
  
  .stat-card__value {
    font-size: 1.25rem;
  }
}

/* Collection toolbar mobile */
@media (max-width: 768px) {
  .collection-toolbar {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  
  .collection-toolbar__search {
    max-width: none;
    width: 100%;
  }
  
  .collection-toolbar__row {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .collection-toolbar__select {
    flex: 1;
    min-width: 120px;
  }
  
  .collection-toolbar__view-toggle {
    flex-shrink: 0;
  }
}

/* Cards grid responsive - defer to collection.css for grid rules */
/* collection.css now handles all grid-template-columns responsive rules */

/* ============================================================================
   MOBILE GRID FIX - Force 2 columns on collection/showcase card grids
   Targets specific card containers, not all grids (to preserve settings, admin, etc.)
   ============================================================================ */
@media (max-width: 768px) {
  /* Force 2 columns on collection cards */
  .collection-cards--grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.625rem !important;
  }
  
  /* Force 2 columns on showcase card grids */
  .showcase-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  
  /* Ensure items fill grid properly */
  .collection-cards__item,
  .showcase-card-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  
  /* Fix holo card container sizing */
  .holo-card-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .holo-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Tablet breakpoint for showcase grid */
@media (min-width: 768px) and (max-width: 1023px) {
  .showcase-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
  }
}

/* Desktop breakpoint for showcase grid */
@media (min-width: 1024px) {
  .showcase-cards-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
  }
}

/* ============================================================================
   DASHBOARD RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
  .dashboard-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .dashboard-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   SETTINGS PAGE RESPONSIVE
   ============================================================================ */
@media (max-width: 640px) {
  .settings-form {
    padding: 1rem;
  }
  
  .settings-form .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  
  /* Avatar section stacking */
  .settings-form .flex.items-center.gap-4 {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================================
   ADMIN PAGES RESPONSIVE
   ============================================================================ */
@media (max-width: 1024px) {
  .admin-grid {
    grid-template-columns: 1fr !important;
  }
  
  .admin-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .admin-table {
    min-width: 600px;
  }
}

@media (max-width: 640px) {
  .admin-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch !important;
  }
  
  .admin-header .btn,
  .admin-header button {
    width: 100%;
    justify-content: center;
  }
  
  .admin-card {
    padding: 1rem;
  }
}

/* ============================================================================
   SCAN PAGE RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
  .scan-upload-zone {
    padding: 2rem 1rem;
  }
  
  .scan-results-grid {
    grid-template-columns: 1fr !important;
  }
  
  .scan-card-preview {
    max-width: 200px;
    margin: 0 auto;
  }
  
  .price-chart-container {
    height: 200px !important;
  }
}

/* ============================================================================
   SHOWCASE PAGE RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
  .showcase-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .showcase-avatar {
    margin: 0 auto;
  }
  
  .showcase-stats {
    justify-content: center;
  }
  
  .showcase-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   FORM ELEMENTS - Touch-friendly sizing
   ============================================================================ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
  
  button,
  [role="button"],
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

/* Hide on mobile */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on desktop */
@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Stack on mobile */
@media (max-width: 768px) {
  .stack-mobile {
    flex-direction: column !important;
  }
  
  .stack-mobile > * {
    width: 100%;
  }
}

/* Full width on mobile */
@media (max-width: 768px) {
  .full-mobile {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Text size adjustments */
@media (max-width: 640px) {
  .text-responsive-sm {
    font-size: 0.875rem;
  }
  
  .text-responsive-base {
    font-size: 0.9375rem;
  }
  
  .text-responsive-lg {
    font-size: 1.125rem;
  }
  
  .text-responsive-xl {
    font-size: 1.5rem;
  }
  
  .text-responsive-2xl {
    font-size: 1.75rem;
  }
}

/* Spacing adjustments */
@media (max-width: 640px) {
  .p-responsive {
    padding: 1rem !important;
  }
  
  .px-responsive {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .py-responsive {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  .gap-responsive {
    gap: 0.75rem !important;
  }
}

/* ============================================================================
   TOUCH FEEDBACK
   ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Better touch feedback on mobile */
  button,
  [role="button"],
  a,
  .clickable {
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.1);
  }
  
  /* Disable hover effects that feel weird on touch */
  .holo-card:hover .holo-card__image {
    transform: none;
  }
  
  .holo-card:active {
    transform: scale(0.98);
  }
  
  /* Larger touch targets */
  .portfolio-item__action,
  .card-modal__chart-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================================================
   LANDSCAPE PHONE FIXES
   ============================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .card-modal,
  .add-card-modal {
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
  
  .mobile-nav-panel {
    width: 50vw;
  }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */
@media print {
  .mobile-menu-toggle,
  .mobile-nav-overlay,
  .mobile-nav-panel,
  .card-modal-overlay,
  .add-card-modal__overlay {
    display: none !important;
  }
  
  body {
    overflow: visible !important;
  }
}