/* 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;
  }
}


/* -------------------------------------------------------
   FIX 13: NTIMS wizard step buttons on mobile
   Rounded-pill step buttons extend beyond viewport.
------------------------------------------------------- */
html {
  overflow-x: hidden;
}

@media (max-width: 575px) {
  .btn-dark.rounded-pill,
  .btn.rounded-pill {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }
  .m-2 {
    max-width: 100%;
    box-sizing: border-box;
  }
  #step-1 .btn-dark,
  #step-2 .btn-dark,
  #step-3 .btn-dark,
  #step-4 .btn-dark {
    max-width: calc(100vw - 32px) !important;
  }
}


/* Standardise bg-orange to CI brand orange (08 Oct 2026) */
/* CI orange: overrides main.css .bg-orange with higher specificity */
body .bg-orange,
.progress-bar.bg-orange,
div.bg-orange,
button.bg-orange,
a.bg-orange {
  background-color: #FF8E20 !important;
}

/* orange-text: standardise to CI orange (08 Oct 2026) */
.orange-text { color: #FF8E20 !important; }

/* ===== CI Fix: Public pages - Bootstrap alert-info teal -> CI navy ===== */
body .alert.alert-info, body .alert-info { background-color: #f8f9fa !important; border-color: #dee2e6 !important; color: #212529 !important; }
/* CI Fix: input/select/textarea focus border: teal -> CI navy */
body input:focus, body select:focus, body textarea:focus { border-color: #1F3964 !important; box-shadow: 0 0 0 0.2rem rgba(31,57,100,0.25) !important; }
/* CI Fix: btn-success on public pages (status portal Search) -> CI orange */
body button.btn-success, body a.btn-success, body input[type=submit].btn-success { background-color: #FF8E20 !important; border-color: #FF8E20 !important; color: #fff !important; }
/* CI Fix: status-details submitted badge was teal */
body .status-badge.submitted { background-color: #1F3964 !important; color: #fff !important; }
body .status-badge.in-progress { background-color: #FF8E20 !important; color: #fff !important; }

/* CI Fix: badge-info teal -> grey */
body .badge-info { background-color: #6c757d !important; color: #fff !important; }