/* =====================================================
   Carvo Admin – Mobile Responsive Fixes
   Targets: compact-wrapper layout, sidebar, tables,
            navbar, forms, cards
   ===================================================== */

/* -------------------------------------------------------
   1. SIDEBAR – Full-screen drawer overlay on mobile
------------------------------------------------------- */
@media (max-width: 991px) {

  /* Remove desktop left-margin so content fills the screen */
  .page-wrapper.compact-wrapper .page-header,
  .page-wrapper.compact-wrapper .page-header.close_icon {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper ~ .page-body {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Sidebar becomes a slide-in overlay */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 280px !important;
    z-index: 1050;
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Simplebar fix ──────────────────────────────────
     Simplebar creates multiple nested containers that
     each have overflow:hidden and fixed heights, which
     clips menu items when the sidebar is scrolled.
     On mobile we collapse those wrappers so native
     overflow-y on sidebar-wrapper handles all scrolling.
  ────────────────────────────────────────────────── */
  .sidebar-wrapper .simplebar-wrapper,
  .sidebar-wrapper .simplebar-mask,
  .sidebar-wrapper .simplebar-offset,
  .sidebar-wrapper .simplebar-content-wrapper {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
  }

  .sidebar-wrapper .simplebar-content {
    height: auto !important;
    overflow: visible !important;
  }

  /* Hide the custom scrollbar track – native scroll handles it */
  .sidebar-wrapper .simplebar-track {
    display: none !important;
  }

  /* Ensure sidebar-links and menu items are fully visible */
  .sidebar-wrapper .sidebar-main,
  .sidebar-wrapper .sidebar-links,
  .sidebar-wrapper #sidebar-menu {
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
  }

  /* Give the sidebar enough bottom padding so last items
     aren't hidden behind device home-bar */
  .sidebar-wrapper .sidebar-main {
    padding-bottom: env(safe-area-inset-bottom, 24px) !important;
  }

  /* Collapsed: slide off-screen to the left */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon {
    transform: translateX(-100%) !important;
    width: 280px !important;
  }

  /* When open, never show icon-only mode on mobile */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper:not(.close_icon) .logo-wrapper {
    display: block !important;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper:not(.close_icon) .logo-icon-wrapper {
    display: none !important;
  }

  /* Fix oversized logo in sidebar */
  .sidebar-wrapper .logo-wrapper {
    padding: 12px 16px !important;
  }
  .sidebar-wrapper .logo-wrapper img {
    max-height: 48px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block;
  }

  /* Show all menu text when drawer is open */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper:not(.close_icon) .sidebar-main .sidebar-links .menu-box {
    display: block !important;
  }

  /* Semi-transparent backdrop shown when sidebar is open */
  body.sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1049;
  }

  /* Always show the hamburger toggle button on mobile */
  .page-wrapper.compact-wrapper .page-header .header-wrapper .toggle-sidebar {
    display: flex !important;
    align-items: center;
    cursor: pointer;
  }
}

/* -------------------------------------------------------
   2. NAVBAR – Compact & touch-friendly
------------------------------------------------------- */
@media (max-width: 991px) {
  .page-header .header-wrapper {
    padding: 10px 15px !important;
    flex-wrap: nowrap;
  }

  .header-logo-wrapper {
    flex-shrink: 0;
  }

  /* Shrink logo on small screens */
  .logo-header-main img {
    max-height: 36px;
    width: auto;
  }

  /* Nav icons – reduce spacing */
  .nav-right .nav-menus {
    margin-right: 0 !important;
  }

  .nav-right .nav-menus > li {
    margin: 0 4px !important;
  }

  /* Hide fullscreen button on mobile (not useful) */
  .nav-right .maximize {
    display: none !important;
  }

  /* Profile dropdown – open upward if near bottom */
  .profile-dropdown.onhover-show-div {
    right: 0;
    left: auto;
  }
}

/* -------------------------------------------------------
   3. PAGE BODY – Proper padding on small screens
------------------------------------------------------- */
@media (max-width: 991px) {
  .page-body {
    padding: 0 !important;
    margin-top: 60px !important; /* account for fixed header */
  }

  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .page-title {
    padding: 12px 0 8px !important;
  }
}

/* -------------------------------------------------------
   4. CARDS & DASHBOARD – Stack cleanly
------------------------------------------------------- */
@media (max-width: 767px) {
  /* Make stat cards full width on phones */
  .col-sm-6.col-lg-3,
  .col-sm-6.col-xl-3,
  .col-sm-6.col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .card {
    margin-bottom: 16px;
  }

  .card-header {
    padding: 12px 16px !important;
  }

  .card-body {
    padding: 12px 16px !important;
  }
}

/* -------------------------------------------------------
   4b. FORM GRIDS – Hard-coded col-X classes (add_car, etc.)
       Bootstrap col-1..col-8 without a breakpoint suffix
       apply at ALL sizes, breaking mobile layouts.
       Override them to be responsive here.
------------------------------------------------------- */

/* Phone: everything full-width */
@media (max-width: 575px) {
  .card-body .row > .col-1,
  .card-body .row > .col-2,
  .card-body .row > .col-3,
  .card-body .row > .col-4,
  .card-body .row > .col-5,
  .card-body .row > .col-6,
  .card-body .row > .col-7,
  .card-body .row > .col-8,
  .card-body .row > .form-group.col-1,
  .card-body .row > .form-group.col-2,
  .card-body .row > .form-group.col-3,
  .card-body .row > .form-group.col-4,
  .card-body .row > .form-group.col-5,
  .card-body .row > .form-group.col-6,
  .card-body .row > .form-group.col-7,
  .card-body .row > .form-group.col-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Tablet: two columns side by side */
@media (min-width: 576px) and (max-width: 991px) {
  .card-body .row > .col-2,
  .card-body .row > .col-3,
  .card-body .row > .col-4,
  .card-body .row > .form-group.col-2,
  .card-body .row > .form-group.col-3,
  .card-body .row > .form-group.col-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Wider fields (col-6+) stay full width on tablet */
  .card-body .row > .col-5,
  .card-body .row > .col-6,
  .card-body .row > .col-7,
  .card-body .row > .col-8,
  .card-body .row > .form-group.col-5,
  .card-body .row > .form-group.col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Section headings inside card forms */
@media (max-width: 767px) {
  .card-body .h5_set,
  .card-body h5 {
    font-size: 15px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 12px;
  }

  /* Image previews inside forms */
  .card-body .image-container img,
  .card-body #imageList img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover;
    border-radius: 6px;
    margin: 4px;
  }

  /* Map inside add_car */
  #map {
    height: 220px !important;
  }

  /* Custom file input label */
  .custom-file-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Textarea – reasonable mobile height */
  textarea.form-control {
    min-height: 100px;
  }
}

/* -------------------------------------------------------
   5. DATATABLES / TABLES – Horizontal scroll
------------------------------------------------------- */
.table-responsive,
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Ensure DataTable wrapper doesn't clip */
.dataTables_wrapper {
  width: 100%;
}

@media (max-width: 991px) {
  /* Shrink table font slightly for more columns to fit */
  table.dataTable thead th,
  table.dataTable tbody td {
    font-size: 13px;
    white-space: nowrap;
  }

  /* DataTables controls stacking */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    margin-bottom: 8px;
    display: block;
    width: 100%;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-top: 4px;
    display: block;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 4px 8px !important;
    font-size: 13px;
  }
}

/* -------------------------------------------------------
   6. FORMS – Full-width, touch-friendly inputs
------------------------------------------------------- */
@media (max-width: 767px) {
  .form-control,
  .form-select,
  select.form-control {
    font-size: 16px !important; /* prevents iOS zoom-on-focus */
    padding: 10px 12px !important;
  }

  .form-group,
  .mb-3 {
    margin-bottom: 16px !important;
  }

  /* Stack form buttons */
  .btn {
    display: inline-block;
    min-height: 44px; /* WCAG touch target */
  }

  /* Full-width submit buttons on mobile */
  button[type="submit"],
  input[type="submit"] {
    width: 100%;
  }
}

/* -------------------------------------------------------
   7. IMAGES IN VERIFICATION / CONTENT PAGES
------------------------------------------------------- */
@media (max-width: 767px) {
  img[width="100"][height="100"] {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
  }
}

/* -------------------------------------------------------
   8. PAGE-SPECIFIC: user_data.php verification section
------------------------------------------------------- */
@media (max-width: 767px) {
  h4 {
    font-size: 18px;
  }
}

/* -------------------------------------------------------
   10. SELECT2 – Force native selects on mobile
       Nuclear CSS option: hide Select2 widget entirely
       and make the hidden native <select> visible again.
------------------------------------------------------- */
@media (max-width: 991px) {
  /* Hide the entire Select2 widget */
  .select2-container {
    display: none !important;
  }

  /* Unhide the native <select> that Select2 hid */
  select.select2-hidden-accessible {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    overflow: visible !important;
    opacity: 1 !important;
    padding: 10px 12px !important;
    font-size: 16px !important; /* prevents iOS zoom */
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    color: #495057;
    display: block !important;
    margin-bottom: 0;
  }
}

/* -------------------------------------------------------
   11. MODAL – Vertically centered & fits mobile screen
------------------------------------------------------- */
@media (max-width: 991px) {
  /* Ensure centered alignment even if class is missing */
  .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
    margin: 0.5rem auto !important;
  }

  /* Constrain width on mobile */
  .modal-dialog.modal-lg {
    max-width: calc(100vw - 24px) !important;
    width: 100%;
  }

  /* Scrollable content if modal is taller than screen */
  .modal-dialog .modal-content {
    max-height: 85vh;
    overflow-y: auto;
  }
}

/* -------------------------------------------------------
   13. DATATABLES RESPONSIVE – Expand row styling
------------------------------------------------------- */
@media (max-width: 991px) {

  /* "+" expand control */
  table.dataTable > tbody > tr.child span.dtr-title {
    font-weight: 600;
    min-width: 120px;
    display: inline-block;
  }

  table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
  }

  table.dataTable > tbody > tr.child ul.dtr-details li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Thumbnail images inside expanded rows */
  table.dataTable > tbody > tr.child img {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover;
    border-radius: 4px;
  }

  /* Booking table: slightly larger row touch targets */
  table.dataTable > tbody > tr > td {
    padding: 10px 8px !important;
    vertical-align: middle;
  }
}

/* -------------------------------------------------------
   9. SCROLLBAR – Thinner on mobile
------------------------------------------------------- */
@media (max-width: 991px) {
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
  }
}