/* ============================================================
   Global Mobile Responsive Fixes
   Loaded on every page via styles.blade.php
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. LAYOUT & CONTAINERS
   ──────────────────────────────────────────────────────────── */

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

/* Content wrapper padding reduction on mobile */
@media (max-width: 767.98px) {
  .container-fluid.container-p-y {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .layout-page .content-wrapper {
    padding: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .container-fluid.container-p-y {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}


/* ────────────────────────────────────────────────────────────
   2. CARDS — ensure they don't overflow
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .card {
    border-radius: 0.75rem;
  }

  .card .card-body {
    padding: 1rem;
  }

  .card .card-header {
    padding: 0.75rem 1rem;
  }
}


/* ────────────────────────────────────────────────────────────
   3. TABLES — the main culprit for mobile overflow
   ──────────────────────────────────────────────────────────── */

/* Ensure table-responsive works globally */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (max-width: 767.98px) {
  /* Reduce table cell padding */
  .table > :not(caption) > * > * {
    padding: 0.5rem 0.4rem;
  }

  /* Smaller table font */
  .table {
    font-size: 0.82rem;
  }

  .table th {
    font-size: 0.78rem;
  }

  /* Allow headers to wrap on mobile */
  .table th {
    white-space: normal !important;
  }

  /* Reset any fixed min-widths on table cells */
  .table th[style*="min-width"],
  .table td[style*="min-width"] {
    min-width: auto !important;
  }

  .table th[style*="width"],
  .table td[style*="width"] {
    width: auto !important;
  }
}

@media (max-width: 575.98px) {
  .table > :not(caption) > * > * {
    padding: 0.4rem 0.3rem;
  }

  .table {
    font-size: 0.78rem;
  }

  .table th {
    font-size: 0.74rem;
  }
}


/* ────────────────────────────────────────────────────────────
   4. DATATABLES SPECIFIC
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* DataTables search/length bar — stack vertically */
  .dataTables_wrapper .row:first-child {
    flex-direction: column;
    gap: 0.5rem;
  }

  .dataTables_wrapper .row:first-child > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: left !important;
  }

  /* DataTables info + pagination bar — stack */
  .dataTables_wrapper .row:last-child {
    flex-direction: column;
    gap: 0.5rem;
  }

  .dataTables_wrapper .row:last-child > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Pagination fitting */
  .dataTables_wrapper .dataTables_paginate .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }

  .dataTables_wrapper .dataTables_paginate .pagination .page-link {
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
  }

  /* DataTables search input full width */
  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    max-width: 100% !important;
  }

  .dataTables_wrapper .dataTables_length select {
    min-width: auto !important;
  }
}


/* ────────────────────────────────────────────────────────────
   5. PAGE HEADERS — flex items that can overflow
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Stack page header elements vertically */
  .card-body > .d-flex.justify-content-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  /* Page titles */
  .card-body h4,
  .card-body h5 {
    font-size: 1.1rem;
  }
}


/* ────────────────────────────────────────────────────────────
   6. PURCHASE TESTING — FILTER BAR (.sf-bar)
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .sf-bar {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .sf-search {
    max-width: 100% !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .sf-pills {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
    width: 100%;
  }

  .sf-select {
    min-width: auto !important;
    width: 100% !important;
  }

  /* Reset inline min-widths on period selects */
  .sf-bar select[style*="min-width"] {
    min-width: auto !important;
  }

  .sf-results {
    font-size: 0.8rem;
  }
}

@media (max-width: 575.98px) {
  .sf-pill {
    font-size: 0.72rem;
    padding: 0.25rem 0.5rem;
  }
}


/* ────────────────────────────────────────────────────────────
   7. PURCHASE TESTING — TABLE FIXES
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Branch columns — reduce min-width */
  .branch-col {
    min-width: 60px !important;
  }

  /* Frequency select inside table */
  .frequency-select {
    min-width: 70px !important;
  }

  .frequency-input {
    width: 40px !important;
    min-width: 40px !important;
  }

  /* Supplier table and checks table — allow smaller */
  .supplier-table th,
  .checks-table th {
    white-space: normal !important;
    font-size: 0.75rem;
  }

  .supplier-table td,
  .checks-table td {
    font-size: 0.8rem;
  }
}


/* ────────────────────────────────────────────────────────────
   8. STAT CARDS — readable on mobile
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Stat number sizes */
  .stat-card h4,
  .pt-stat-number,
  .card-info h4 {
    font-size: 1.15rem;
  }

  /* Stat icon wrappers */
  .stat-icon-wrapper {
    width: 38px;
    height: 38px;
  }

  .stat-icon-wrapper i {
    font-size: 1.1rem !important;
  }

  .avatar-md {
    width: 36px !important;
    height: 36px !important;
  }
}


/* ────────────────────────────────────────────────────────────
   9. BADGES & BUTTONS — touch-friendly sizing
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Minimum touch target size */
  .btn {
    min-height: 38px;
    font-size: 0.85rem;
  }

  .btn-sm {
    min-height: 30px;
    font-size: 0.78rem;
    padding: 0.25rem 0.5rem;
  }

  /* Badge sizing */
  .badge {
    font-size: 0.7rem;
    padding: 0.3em 0.55em;
  }
}


/* ────────────────────────────────────────────────────────────
   10. FORM CONTROLS
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Ensure form controls don't overflow */
  .form-control,
  .form-select {
    font-size: 0.85rem;
    min-height: 38px;
  }

  /* Input groups */
  .input-group {
    flex-wrap: nowrap;
  }

  .input-group .form-control {
    min-width: 0;
  }
}


/* ────────────────────────────────────────────────────────────
   11. MODALS — full width on mobile
   ──────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-body {
    padding: 1rem;
  }
}


/* ────────────────────────────────────────────────────────────
   12. ALERTS
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .alert {
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
  }
}


/* ────────────────────────────────────────────────────────────
   13. BREADCRUMBS / NAVIGATION
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .breadcrumb {
    font-size: 0.78rem;
    flex-wrap: wrap;
  }

  /* Navbar search */
  .navbar-search-wrapper {
    width: 100%;
  }
}


/* ────────────────────────────────────────────────────────────
   14. FLEX HELPERS — prevent overflow
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* D-flex containers with gap that can overflow */
  .d-flex.gap-2,
  .d-flex.gap-3 {
    flex-wrap: wrap !important;
  }

  /* Long text that can push containers */
  .text-truncate {
    max-width: 100%;
  }

  /* Progress bars in tables */
  .progress {
    min-width: 60px;
  }
}


/* ────────────────────────────────────────────────────────────
   15. SALES DATA PAGE
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Year stats inner grid — stack on small */
  .col-4 .text-center h5 {
    font-size: 0.9rem;
  }

  .col-4 .text-muted {
    font-size: 0.7rem;
  }
}

@media (max-width: 575.98px) {
  /* Growth banner text */
  [style*="linear-gradient"] h5 {
    font-size: 0.9rem;
  }
}


/* ────────────────────────────────────────────────────────────
   16. HOME PAGE
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .hero-section {
    min-height: auto;
    padding: 2rem 0;
  }
}


/* ────────────────────────────────────────────────────────────
   17. PRINT STYLES — ensure they don't bleed into screen
   ──────────────────────────────────────────────────────────── */

/* Already handled per-page */


/* ────────────────────────────────────────────────────────────
   18. SCROLLBAR FIX — thin scrollbar on mobile table scroll
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .table-responsive::-webkit-scrollbar {
    height: 4px;
  }

  .table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  .table-responsive::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 4px;
  }

  .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #999;
  }
}


/* ────────────────────────────────────────────────────────────
   19. PROFILE PAGE
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .avatar-xl {
    width: 80px !important;
    height: 80px !important;
  }
}


/* ────────────────────────────────────────────────────────────
   20. PURCHASE ORDER LINES PAGES
   ──────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  /* Search bar full width */
  .input-group-merge {
    flex-wrap: nowrap;
  }

  .input-group-merge .form-control {
    min-width: 0;
  }
}