/* GEN-01: Mobile Responsiveness Fixes */

/* -------------------------------------------------------
   FIX 1: Navbar at exactly 768px (Bootstrap md breakpoint)
   -------------------------------------------------------
   Custom CSS in main.css/responsive.css uses @media (max-width: 768px)
   which hides .menu-items at exactly 768px. Bootstrap's d-md-none also
   hides the hamburger at >=768px. This leaves NO navigation at 768px.
   Force .menu-items to show at md+ and hide the hamburger row.
------------------------------------------------------- */
@media (min-width: 768px) {
  .menu-items {
    display: flex !important;
  }
  .toggle-menu {
    display: none !important;
  }
}

/* -------------------------------------------------------
   FIX 2: Footer contact column email overflow
   -------------------------------------------------------
   col-md-2 is too narrow for callcentre@tourism.gov.za.
   Apply word-break on tablet so email wraps cleanly.
------------------------------------------------------- */
footer .col-md-2 a[href^="mailto"],
footer .col-md-2 a[href^="tel"] {
  word-break: break-all;
  overflow-wrap: break-word;
}

/* -------------------------------------------------------
   FIX 3: Footer column sizing on tablet (md)
   -------------------------------------------------------
   Give Contact Us more room on md screens by switching to
   a 4-4-4 layout at tablet, 5-5-2 only at lg+.
------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  footer .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  footer .col-md-2.mx-auto {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* -------------------------------------------------------
   FIX 4: Prevent horizontal scroll on small screens
------------------------------------------------------- */
body {
  overflow-x: hidden;
}

/* -------------------------------------------------------
   FIX 5: Complaint form -- make action buttons stack
   on very small screens (< 400px)
------------------------------------------------------- */
@media (max-width: 400px) {
  .btn + .btn {
    margin-top: 8px;
  }
  .d-flex.align-items-center .btn {
    width: 100%;
    margin-bottom: 6px;
  }
}

/* -------------------------------------------------------
   FIX 6: Tables on mobile -- wrap in scroll container
   to prevent overflow. Applies to admin complaint grids
   and tourist guide grids.
------------------------------------------------------- */
@media (max-width: 767px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* complaint and tourist guide admin tables */
  .table:not(.table-sm) {
    min-width: 600px;
  }
  .table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* -------------------------------------------------------
   FIX 7: Decision tree screening form on mobile
------------------------------------------------------- */
@media (max-width: 575px) {
  .complaint-screening-card,
  .complaint-screening-card .card-body {
    padding: 1rem;
  }
  .progress {
    font-size: 0.75rem;
  }
}

/* -------------------------------------------------------
   FIX 8: Nova admin panel sidebar navigation on mobile
------------------------------------------------------- */
@media (max-width: 767px) {
  /* Ensure Nova cards don't overflow on mobile */
  .nova-card,
  .card {
    overflow-x: hidden;
  }
}

/* -------------------------------------------------------
   FIX 9: Images never overflow their containers
------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------
   FIX 10: Input fields -- full width on mobile
------------------------------------------------------- */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* -------------------------------------------------------
   FIX 11: Pagination -- wrap page numbers on mobile so
   they don't overflow the viewport horizontally
------------------------------------------------------- */
@media (max-width: 767px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* -------------------------------------------------------
   FIX 12: Nova Tourist Guides index table -- mobile
   Column positions (checkbox=1): 2=Reg No, 3=Full Name,
   4=Gender, 5=Category, 6=Type, 7=Expiry Date,
   8=Reg Status, 9=Verification Status, 10=Published,
   11=Flag, 12=Last Updated, 13=Last Updated By, 14=Actions
------------------------------------------------------- */

/* Tablet (768-991px): hide Published and Last Updated By */
@media (max-width: 991px) {
  [data-testid="resource-table"] th:nth-child(10),
  [data-testid="resource-table"] td:nth-child(10),
  [data-testid="resource-table"] th:nth-child(13),
  [data-testid="resource-table"] td:nth-child(13) {
    display: none !important;
  }
}

/* Mobile (<768px): hide Gender, Category, Type, Flag, Last Updated */
@media (max-width: 767px) {
  /* Ensure the Nova table wrapper scrolls properly */
  .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  [data-testid="resource-table"] th:nth-child(4),
  [data-testid="resource-table"] td:nth-child(4),
  [data-testid="resource-table"] th:nth-child(5),
  [data-testid="resource-table"] td:nth-child(5),
  [data-testid="resource-table"] th:nth-child(6),
  [data-testid="resource-table"] td:nth-child(6),
  [data-testid="resource-table"] th:nth-child(11),
  [data-testid="resource-table"] td:nth-child(11),
  [data-testid="resource-table"] th:nth-child(12),
  [data-testid="resource-table"] td:nth-child(12) {
    display: none !important;
  }

  /* Shrink action buttons so they fit without excessive horizontal scroll */
  a.tg-action {
    width: 72px !important;
    font-size: 11px !important;
    padding: 4px 5px !important;
    min-width: 0 !important;
    margin-right: 4px !important;
  }

  /* Prevent Full Name from collapsing too narrow */
  [data-testid="resource-table"] td:nth-child(3) {
    min-width: 110px;
  }

  /* Make badge text smaller so status columns fit */
  [data-testid="resource-table"] .badge {
    font-size: 10px !important;
    padding: 2px 5px !important;
    white-space: nowrap;
  }
}

/* Very small phones (<480px): also hide Category and Type */
@media (max-width: 479px) {
  [data-testid="resource-table"] th:nth-child(5),
  [data-testid="resource-table"] td:nth-child(5),
  [data-testid="resource-table"] th:nth-child(6),
  [data-testid="resource-table"] td:nth-child(6) {
    display: none !important;
  }
}