/* ============================================================
   AK TRADING ERP — Universal Mobile Stylesheet
   Loaded on every page. Targets phones (≤768px) and tablets (≤1024px).
   Strategy: high-specificity selectors + !important sparingly,
   only where existing inline/page CSS conflicts.
   ============================================================ */

/* ---------- 1. BASE FIXES (apply at all sizes) ---------- */

/* Box sizing safety */
*, *::before, *::after { box-sizing: border-box; }

/* Prevent horizontal overflow on the whole page */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Touch-friendly minimum target sizes globally */
button, .btn, input[type="button"], input[type="submit"], a.btn, .action-btn {
  min-height: 36px;
}

/* iOS input zoom prevention - never under 16px on inputs */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ---------- 2. TABLE RESPONSIVENESS (universal) ---------- */
/* Wrap any direct table to scroll horizontally on small screens.
   Pages without wrappers will at least not blow up the layout. */
@media (max-width: 1024px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
  }
  table thead, table tbody, table tr {
    display: table;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
  }
  /* But if a table is inside an existing wrapper, let the wrapper scroll */
  .table-responsive table,
  .table-wrap table,
  [class*="overflow-x"] table {
    display: table;
    width: 100%;
  }
}

/* ---------- 3. TABLET BREAKPOINT (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  /* Common Tailwind/utility patterns we use everywhere */
  .stats-row,
  .stats-grid,
  .kpi-grid,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Sidebar + content layouts collapse */
  .main-grid,
  .with-sidebar,
  .layout-grid,
  .two-col,
  .three-col {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- 4. PHONE BREAKPOINT (≤ 768px) ---------- */
@media (max-width: 768px) {

  /* CRITICAL FIX: many pages have overflow:hidden on html/body which
     completely breaks mobile scroll. Force it off. */
  html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh;
  }

  /* Common app-wrap / container patterns that lock height */
  .app-wrap,
  .app-container,
  .layout,
  .content-area,
  .main-content {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }

  /* Stats / KPI grids → 1 column on phone */
  .stats-row,
  .stats-grid,
  .kpi-grid,
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Common page padding tightens */
  .content,
  .page-content,
  .container,
  main {
    padding: 12px !important;
  }

  /* Side panel / drawer components → full width slide-in */
  .sp,
  .side-panel,
  .drawer,
  .right-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Modals fill more of the screen */
  .modal,
  .modal-content,
  .modal-dialog {
    max-width: 95vw !important;
    margin: 10px auto !important;
  }

  /* Toolbars / action bars wrap instead of overflow */
  .toolbar,
  .actions-bar,
  .filters-bar,
  .page-header-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Buttons slightly larger touch target */
  .btn, button.btn {
    min-height: 40px;
    padding: 8px 14px;
  }

  /* Hide truly desktop-only elements */
  .desktop-only,
  .hide-mobile {
    display: none !important;
  }

  /* Show mobile-only elements */
  .mobile-only {
    display: block !important;
  }

  /* Nav items in headers - allow wrap */
  .ak-header-nav,
  .header-nav,
  nav.main-nav {
    flex-wrap: wrap !important;
  }

  /* Stat card sizing */
  .stat-card,
  .kpi-card {
    padding: 12px !important;
  }
  .stat-value,
  .kpi-value {
    font-size: 20px !important;
  }

  /* Form rows: 2-column inputs become single column */
  .form-row,
  .form-grid,
  .input-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* Chart containers shouldn't overflow */
  .chart-container,
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Long text in cells truncates with ellipsis instead of breaking layout */
  td, th {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------- 5. SMALL PHONE (≤ 480px) ---------- */
@media (max-width: 480px) {
  .content,
  .page-content,
  main {
    padding: 8px !important;
  }

  .stat-value,
  .kpi-value {
    font-size: 18px !important;
  }

  /* Header brand/title shrinks */
  .ak-header-title,
  .page-title {
    font-size: 16px !important;
  }

  /* Hide secondary header items on tiny screens */
  .header-search,
  .header-secondary {
    display: none !important;
  }
}

/* ---------- 6. PRINT (preserve current print styles) ---------- */
@media print {
  html, body { overflow: visible !important; height: auto !important; }
}

/* ---------- 7. UTILITY CLASSES (for per-page polish later) ---------- */
.mobile-only { display: none; }
@media (max-width: 768px) {
  .mobile-only { display: block; }
  .desktop-only { display: none !important; }
}

/* Force horizontal table scroll wrapper helper */
.mobile-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}