/**
 * PaperDock Responsive Enhancement Layer
 * Non-breaking responsive improvements - keeps existing design intact
 */

/* ============================================================
   GLOBAL RESPONSIVE FIXES
   ============================================================ */

/* Prevent horizontal overflow globally */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  min-width: 320px;
}

/* Safe image/media scaling */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   MOBILE SIDEBAR FIX (Non-breaking)
   ============================================================ */

@media (max-width: 768px) {
  /* Hide sidebar on mobile by default */
  aside#sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  }

  /* When sidebar is open on mobile */
  aside#sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* Overlay when sidebar is open */
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .sidebar-overlay.active {
    display: block;
    opacity: 1;
  }
}

/* ============================================================
   TABLE RESPONSIVE (Safe horizontal scroll)
   ============================================================ */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Ensure table cells don't break on mobile */
@media (max-width: 640px) {
  table {
    font-size: 0.875rem;
  }

  table th,
  table td {
    padding: 0.5rem !important;
    white-space: nowrap;
  }
}

/* ============================================================
   FORM RESPONSIVE (Safe stacking)
   ============================================================ */

@media (max-width: 640px) {
  /* Stack form inputs vertically on small screens */
  .form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* Make all buttons full width on mobile unless specified otherwise */
  .btn-responsive {
    width: 100%;
  }

  @media (min-width: 640px) {
    .btn-responsive {
      width: auto;
    }
  }
}

/* ============================================================
   MODAL RESPONSIVE (Safe centering and scrolling)
   ============================================================ */

@media (max-width: 640px) {
  .modal-content {
    max-width: calc(100% - 2rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    margin: 1rem;
  }
}

/* ============================================================
   NAVBAR RESPONSIVE (Safe wrapping)
   ============================================================ */

@media (max-width: 640px) {
  nav .flex.items-center {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Hide less critical navbar items on very small screens */
  .navbar-hide-xs {
    display: none !important;
  }
}

@media (min-width: 641px) {
  .navbar-hide-xs {
    display: flex !important;
  }
}

/* ============================================================
   CARD GRID RESPONSIVE (Safe breakpoint adjustments)
   ============================================================ */

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

@media (min-width: 641px) and (max-width: 1024px) {
  .grid-responsive {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   INVOICE/CONTRACT PREVIEW RESPONSIVE (Safe scaling)
   ============================================================ */

@media (max-width: 768px) {
  .preview-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .preview-content {
    min-width: 600px; /* Prevent crushing */
  }
}

/* Alternative: Scale down on very small screens */
@media (max-width: 480px) {
  .preview-content-scale {
    transform: scale(0.85);
    transform-origin: top left;
    width: 117.6%; /* Compensate for scale */
  }
}

/* ============================================================
   SPACING ADJUSTMENTS (Mobile-specific padding)
   ============================================================ */

@media (max-width: 640px) {
  .container-mobile-padding {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .section-mobile-padding {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* ============================================================
   TOUCH TARGET SIZES (Accessibility)
   ============================================================ */

@media (max-width: 768px) {
  button,
  a.button,
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Ensure icon buttons have adequate touch area */
  button:not(.btn-sm) {
    padding: 0.75rem !important;
  }
}

/* ============================================================
   STATS/DASHBOARD CARDS (Safe responsive grid)
   ============================================================ */

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

@media (min-width: 641px) and (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   TEXT TRUNCATION (Prevent overflow)
   ============================================================ */

.truncate-mobile {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .truncate-mobile {
    max-width: 150px;
  }
}

/* ============================================================
   FLEX WRAP UTILITIES (Safe wrapping on small screens)
   ============================================================ */

@media (max-width: 640px) {
  .flex-wrap-mobile {
    flex-wrap: wrap !important;
  }
}

/* ============================================================
   LOGO/BRAND RESPONSIVE (Safe scaling)
   ============================================================ */

@media (max-width: 480px) {
  .logo-responsive {
    font-size: 1.125rem !important;
  }

  .logo-icon-responsive {
    width: 1.75rem !important;
    height: 1.75rem !important;
  }
}

/* ============================================================
   ALERT/NOTIFICATION RESPONSIVE (Safe mobile display)
   ============================================================ */

@media (max-width: 640px) {
  .alert-responsive {
    font-size: 0.875rem !important;
    padding: 0.75rem !important;
  }
}

/* ============================================================
   SIDEBAR SCROLL FIX (Prevent body scroll when sidebar open)
   ============================================================ */

@media (max-width: 768px) {
  body.sidebar-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 769px) {
  body.sidebar-open {
    overflow: auto;
    position: static;
  }
}

/* ============================================================
   PRINT STYLES (Preserve)
   ============================================================ */

@media print {
  aside,
  nav,
  .no-print {
    display: none !important;
  }

  main {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ============================================================
   HIGH DPI / RETINA DISPLAYS (Safe enhancements)
   ============================================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Enhance icon/image rendering if needed */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ============================================================
   LANDSCAPE MOBILE (Safe orientation handling)
   ============================================================ */

@media (max-height: 500px) and (orientation: landscape) {
  aside {
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* ============================================================
   VERY SMALL DEVICES (320px - 360px)
   ============================================================ */

@media (max-width: 360px) {
  /* Reduce padding on extremely small screens */
  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Scale down text slightly */
  h1 {
    font-size: 1.5rem !important;
  }

  h2 {
    font-size: 1.25rem !important;
  }
}

/* ============================================================
   UTILITY: HIDE/SHOW BASED ON BREAKPOINTS (Safe utilities)
   ============================================================ */

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

/* Show only on mobile */
@media (min-width: 641px) {
  .show-mobile {
    display: none !important;
  }
}

/* Hide on tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Show only on tablet */
@media (max-width: 640px), (min-width: 1025px) {
  .show-tablet {
    display: none !important;
  }
}