/* ProchPro - PWA responsive hardening (mobile-first)
   Loaded AFTER theme + app.css
*/
:root {
  --pp-safe-top: env(safe-area-inset-top);
  --pp-safe-bottom: env(safe-area-inset-bottom);
  --pp-primary: #0d6efd;
  --pp-focus-ring: rgba(13, 110, 253, 0.35);
}

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

/* Avoid accidental horizontal scroll from fixed-width children */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Flex/grid overflow: allow children to shrink (common cause of horizontal overflow) */
.row > [class*="col-"],
.d-flex > *,
.navbar, .navbar * {
  min-width: 0;
}

/* Long content should scroll, not break layout */
pre, code { max-width: 100%; }
pre { overflow: auto; -webkit-overflow-scrolling: touch; }

/* Tap targets (menus/buttons) */
a, button, .btn, .nav-link, .dropdown-item { touch-action: manipulation; }
.navbar a, .main-bar a, .header-nav a { -webkit-tap-highlight-color: transparent; }

/* Accessible focus ring (keyboard) */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

/* Fallback for browsers without :focus-visible */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus, .btn:focus {
    outline: 3px solid var(--pp-focus-ring);
    outline-offset: 2px;
  }
}

/* Fix iOS safe areas only when installed (avoid shifting normal browser pages) */
@media (display-mode: standalone) {
  body { padding-top: var(--pp-safe-top); padding-bottom: var(--pp-safe-bottom); }
}

/* Tables: default behaviour */
.table-responsive, .dataTables_wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { word-break: normal; }

/* =============================================
   Tables -> Mobile cards (Uber-like)
   Goal: no horizontal scrollbars on phones.
   Scope: dashboards (tables marked by JS with .pp-table-mobile-cards)
   Escape hatch: set data-pp-no-cards="1" on a table
                or add .pp-allow-xscroll on wrapper
   ============================================= */

@media (max-width: 576px) {
  /* Disable horizontal scrolling for dashboard listings (cards mode) */
  .content-admin-main .table-responsive:not(.pp-allow-xscroll) { overflow-x: hidden; }

  table.pp-table-mobile-cards {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Hide the table header (cards carry labels) */
  table.pp-table-mobile-cards thead {
    display: none !important;
  }

  /* Each row becomes a card */
  table.pp-table-mobile-cards tbody tr.pp-row-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 12px;
    margin: 10px 0;
    box-shadow: none;
  }

  /* Cell layout */
  table.pp-table-mobile-cards tbody tr.pp-row-card > td {
    display: block;
    width: 100% !important;
    padding: 8px 0 !important;
    border: 0 !important;
    text-align: left !important;
    background: transparent !important;
    white-space: normal !important;
  }

  /* Visual order: title -> status -> details -> actions */
  table.pp-table-mobile-cards tbody tr.pp-row-card > td { order: 10; }
  table.pp-table-mobile-cards tbody tr.pp-row-card > td.pp-card-title { order: 0; }
  table.pp-table-mobile-cards tbody tr.pp-row-card > td.pp-card-status { order: 1; }
  table.pp-table-mobile-cards tbody tr.pp-row-card > td.pp-card-actions { order: 99; }

  /* Reduce visual noise for empty cells */
  table.pp-table-mobile-cards tbody tr.pp-row-card > td.pp-cell-empty {
    display: none !important;
  }

  /* Hide columns flagged as non-essential on mobile */
  table.pp-table-mobile-cards tbody tr.pp-row-card > td.pp-col-hide-mobile {
    display: none !important;
  }

  /* Title line */
  table.pp-table-mobile-cards tbody tr.pp-row-card > td.pp-card-title {
    padding-top: 0 !important;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
  }

  /* Status badge: keep compact and aligned */
  table.pp-table-mobile-cards tbody tr.pp-row-card > td.pp-card-status {
    padding-top: 0 !important;
  }

  /* Generic "label: value" rows */
  table.pp-table-mobile-cards tbody tr.pp-row-card > td:not(.pp-card-title):not(.pp-card-actions) {
    display: grid;
    grid-template-columns: minmax(80px, 0.9fr) minmax(0, 1.1fr);
    gap: 10px;
    align-items: start;
  }

  table.pp-table-mobile-cards tbody tr.pp-row-card > td:not(.pp-card-title):not(.pp-card-actions)::before {
    content: attr(data-pp-label);
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.2;
    padding-top: 2px;
  }

  /* Actions row */
  table.pp-table-mobile-cards tbody tr.pp-row-card > td.pp-card-actions {
    padding-bottom: 0 !important;
  }

  table.pp-table-mobile-cards tbody tr.pp-row-card > td.pp-card-actions .btn,
  table.pp-table-mobile-cards tbody tr.pp-row-card > td.pp-card-actions a.btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  /* If there are multiple action buttons, stack them neatly */
  table.pp-table-mobile-cards tbody tr.pp-row-card > td.pp-card-actions {
    display: grid;
    grid-auto-flow: row;
    gap: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 6px;
    padding-top: 10px !important;
  }

  /* Keep badges readable on small Android screens */
  table.pp-table-mobile-cards .badge {
    font-size: 12px;
    padding: 0.35em 0.6em;
    border-radius: 999px;
  }
}

/* DataTables: keep controls from overflowing on mobile */
@media (max-width: 576px) {
  .dataTables_wrapper .row { margin-left: 0; margin-right: 0; }
  .dataTables_wrapper .col-sm-12, .dataTables_wrapper .col-md-6 { padding-left: 0; padding-right: 0; }
  .dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; max-width: 100%; }
}

/* Forms: prevent iOS zoom on inputs */
@media (max-width: 576px) {
  input, select, textarea { font-size: 16px; }
}

/* Modals: better on phones */
@media (max-width: 576px) {
  .modal-dialog { margin: 0.75rem; }
  .modal-content { border-radius: 14px; }
}

/* Bootstrap modal scrollbar compensation can cause horizontal jumps on mobile */
@media (max-width: 768px) {
  body.modal-open { padding-right: 0 !important; }
  .modal { padding-right: 0 !important; }
}

/* Cards / grids: reduce side padding */
@media (max-width: 576px) {
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
}

/* PWA install button: keep visible and safe-area friendly */
.pp-pwa-install-wrap { bottom: calc(16px + var(--pp-safe-bottom)); }

/* Prevent long words breaking layout */
* { word-wrap: break-word; overflow-wrap: break-word; }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ===============================
   Blog (public)
   Better responsive cover images
   =============================== */

/* Blog cards: keep a consistent cover ratio and avoid layout jumps */
.pp-blog-card .pp-blog-cover {
  display: block;
  overflow: hidden;
}

.pp-blog-card .pp-blog-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@supports not (aspect-ratio: 16 / 9) {
  .pp-blog-card .pp-blog-cover img {
    height: 220px;
  }
}

@media (max-width: 576px) {
  .pp-blog-card .pp-blog-cover img {
    aspect-ratio: 4 / 3;
  }
}

/* Blog article (detail): hero image should not be overly tall on phones */
.pp-blog-hero-img {
  display: block;
  width: 100%;
  height: clamp(220px, 42vh, 380px);
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
}

@supports (height: 100dvh) {
  .pp-blog-hero-img {
    height: clamp(220px, 42dvh, 380px);
  }
}

@media (max-width: 576px) {
  .pp-blog-hero-img {
    height: clamp(160px, 28vh, 220px);
  }
}

.sf-blog-content {
  line-height: 1.75;
}

/* Rich content safety: tables in blog content should not break mobile layout */
.sf-blog-content table {
  max-width: 100%;
  width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===============================
   Dashboards (admin/provider/customer)
   Mobile sidebar scroll stability
   =============================== */

/* Avoid 100vh jumpiness on mobile (URL bar show/hide) */
.wrapper-admin { height: auto; min-height: 100vh; }
@supports (min-height: 100dvh) {
  .wrapper-admin { min-height: 100dvh; }
}

/* Avoid vh-based max-height jitters (mobile URL bar) and keep a single stable
   scroll container for the sidebar menu. */
#sidebar-admin-wraper {
  bottom: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}

#sidebar-admin-wraper .admin-nav {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* On small screens, opening the sidebar should not shrink the content area
   (the theme's default `#content.active { width: calc(100% - 250px) }` makes
   the layout unstable and can trigger unwanted scrollbars). */
@media (max-width: 768px) {
  #content.active {
    width: 100% !important;
  }

  #header-admin.active .container,
  #content.active .content-admin-main {
    min-width: 0 !important;
  }
}

/* Prefer native overlay scrollbars on touch devices (avoid forcing a 6px
   always-visible scrollbar that can appear to "move" as viewport resizes). */
@media (pointer: coarse) {
  #sidebar-admin-wraper .admin-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  #sidebar-admin-wraper .admin-nav {
    scrollbar-width: none;
  }
}

/* =============================
   Select responsiveness
   ============================= */

/* Ensure enhanced selects can shrink inside flex items (common in hero search bars) */
.bootstrap-select {
  min-width: 0;
}

/* Bootstrap-select
   Do not force full-width globally.
   Force full-width only in common form/search contexts.
*/
.bootstrap-select {
  max-width: 100%;
}

.search-form .bootstrap-select,
.sf-search-form-1 .bootstrap-select,
.aon-searchbar-table .bootstrap-select,
.sf-job-sidebar-blocks .bootstrap-select,
.form-group .bootstrap-select {
  width: 100% !important;
  display: block;
}

.search-form .bootstrap-select > .dropdown-toggle,
.sf-search-form-1 .bootstrap-select > .dropdown-toggle,
.aon-searchbar-table .bootstrap-select > .dropdown-toggle,
.sf-job-sidebar-blocks .bootstrap-select > .dropdown-toggle,
.form-group .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
}

/* Avoid dropdowns being clipped behind fixed headers/modals */
.bootstrap-select .dropdown-menu {
  z-index: 1060;
}

/* Keep dropdown within viewport on small screens */
.bootstrap-select .dropdown-menu {
  max-width: 100vw;
  width: 100% !important;
  box-sizing: border-box;
}

@media (max-width: 576px) {
  .bootstrap-select .dropdown-menu {
    /* Avoid double scrollbars: let .inner handle scrolling */
    overflow: hidden;
  }

  .bootstrap-select .dropdown-menu .inner {
    max-height: 60vh;
    max-height: 60svh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Bootstrap-select search box should not trigger iOS/Android zoom */
  .bootstrap-select .bs-searchbox .form-control {
    font-size: 16px;
  }
}

/* Unify native selects (non-multiple) with enhanced selects */
select.sf-select-box:not([multiple]) {
  background-color: #f7fafc;
  border: 1px solid #e8edf1;
  border-radius: 5px;
  box-shadow: none;
  padding-left: 12px;
  padding-right: 32px;
}

/* Unify bootstrap-select toggle with native select styling */
.bootstrap-select > .dropdown-toggle {
  background-color: #f7fafc;
  border: 1px solid #e8edf1;
  border-radius: 5px;
  box-shadow: none;
  padding-left: 12px;
  padding-right: 12px;
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
  background: #fff;
  box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
  outline: 0;
}

/* Align text vertically inside bootstrap-select */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle .filter-option {
  min-height: 38px;
  display: flex;
  align-items: center;
}

@media (pointer: coarse) {
  .bootstrap-select > .dropdown-toggle,
  .bootstrap-select > .dropdown-toggle .filter-option {
    min-height: 44px;
  }
}

/* Make bootstrap-select active option consistent with theme highlight */
.bootstrap-select .dropdown-menu .active > a,
.bootstrap-select .dropdown-menu .selected > a,
.bootstrap-select .dropdown-menu .active > .dropdown-item,
.bootstrap-select .dropdown-menu .selected > .dropdown-item {
  background-color: #022279;
  color: #fff;
}

/* bootstrap-select dropdown: allow multi-line option labels */
.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu li a span.text,
.bootstrap-select .dropdown-menu .dropdown-item {
  white-space: normal !important;
  text-overflow: clip !important;
}

.bootstrap-select .dropdown-menu .inner {
  overflow-x: hidden;
}

/* =============================
   Overflow fixes (theme hot-spots)
   ============================= */

/* bootstrap-select: selected value should never force horizontal overflow */
.bootstrap-select > .dropdown-toggle .filter-option {
  min-width: 0;
  overflow: hidden;
}

.bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Admin header dropdowns: theme uses fixed width (350px) + negative right offsets */
.header-widget-wrap .dropdown-menu {
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
}

@media (max-width: 576px) {
  .header-widget-wrap .dropdown-menu {
    width: auto;
    min-width: 0;
    left: 12px;
    right: 12px;
  }
}

/* Small floating panels: remove minimum width on small screens */
@media (max-width: 576px) {
  .admin-area-content {
    min-width: 0;
    width: auto;
    left: 12px;
    right: 12px;
  }
}

/* Provider quote form: theme enforces min-width buttons that can overflow on phones */
@media (max-width: 576px) {
  .sf-provi-qform .btn {
    min-width: 0;
    width: 100%;
  }
}

/* Blog list cards: theme uses nowrap + min-width thumbnail (295px) => overflow on mobile */
@media (max-width: 767px) {
  .aon-blog-list3 .post-bx {
    flex-wrap: wrap;
  }

  .aon-blog-list3 .post-bx .post-thum {
    min-width: 0;
    width: 100%;
  }

  .aon-blog-list3 .post-info {
    padding-left: 0;
    padding-top: 18px;
  }
}

/* Admin header: allow search to shrink on tablets (theme sets min-width: 250px) */
@media (max-width: 991px) {
  .aon-admin-search-box {
    min-width: 0;
  }

  .aon-admin-search {
    min-width: 0;
  }

  .aon-admin-search .form-control {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
}