/*********************************************
 * jobnext-mobile.css
 * Purpose: Mobile-responsive overrides for JobNext ERP
 * Target:  UAT → jobnext-uat.aspirtek.com
 * Version: 1.0
 * Date:    2026-03-29
 * Notes:
 *   - Loaded AFTER theme.css and portal.css
 *   - All rules scoped to avoid conflicts with BS5Shine base
 *   - Breakpoints: 768px (tablet), 576px (phone)
 *********************************************/

/* ===========================================
   1. GLOBAL MOBILE RESETS
   =========================================== */

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
}

/* Fix containers to respect viewport */
@media (max-width: 768px) {
  .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  #theme-page-main .container-fluid {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  
  /* Main content should take full width */
  .flex-grow-1 {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ===========================================
   2. SIDEBAR / NAVIGATION (MOBILE)
   =========================================== */

/* On mobile (<992px), sidebar is already hidden by BS5Shine (d-none d-lg-flex)
   The offcanvas needs navigation items + proper styling */
@media (max-width: 991.98px) {
  /* Make sure sidebar takes no space on mobile */
  #siteSidebar {
    display: none !important;
  }

  /* Offcanvas: white background, proper sizing, sits above EVERYTHING */
  .offcanvas.offcanvas-start,
  .offcanvas.offcanvas-start.show,
  .offcanvas.offcanvas-start.showing {
    width: 300px !important;
    max-width: 85vw;
    background: #fff !important;
    z-index: 2147483647 !important; /* max int32 — above any inline z-index */
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    position: fixed !important;
  }

  /* Backdrop: dim + cover everything behind the menu */
  .offcanvas-backdrop,
  .offcanvas-backdrop.show,
  .offcanvas-backdrop.showing {
    z-index: 2147483646 !important;
    opacity: 0.5 !important;
    background: #000 !important;
    position: fixed !important;
  }

  .offcanvas-header {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding: 0.75rem 1rem;
  }

  /* FIX: offcanvas body was inheriting cyan background */
  .offcanvas-body {
    background: #fff !important;
    padding: 0 !important;
    display: block !important;
  }

  /* HIDE the original navbar-nav content inside offcanvas
     (user bar, empty spacer divs) — navigation is cloned from sidebar */
  .offcanvas-body > .navbar-nav {
    display: none !important;
  }

  /* Mobile navigation menu (cloned from sidebar) */
  .offcanvas-mobile-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
  }

  .offcanvas-mobile-nav .sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .offcanvas-mobile-nav .nav-item {
    margin: 0.125rem 0;
  }

  .offcanvas-mobile-nav .nav-link {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem !important;
    font-size: 0.95rem;
    color: var(--bs-body-color, #555) !important;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background 0.15s;
  }

  .offcanvas-mobile-nav .nav-link:hover,
  .offcanvas-mobile-nav .nav-link:active {
    background: rgba(41, 171, 226, 0.1);
  }

  .offcanvas-mobile-nav .nav-link.active {
    background: rgba(41, 171, 226, 0.12);
    color: var(--bs-primary) !important;
    font-weight: 500;
  }

  .offcanvas-mobile-nav .nav-link .icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .offcanvas-mobile-nav .sidebar-text {
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }

  /* Submenu toggle chevrons */
  .offcanvas-mobile-nav .submenu-toggle {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    transition: transform 0.2s;
  }

  .offcanvas-mobile-nav .nav-item.submenu-open > a .submenu-toggle {
    transform: rotate(90deg);
  }

  /* Submenus: hidden by default, shown when parent is expanded */
  .offcanvas-mobile-nav .sidebar-submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.5rem;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
  }

  .offcanvas-mobile-nav .nav-item.submenu-open > .sidebar-submenu {
    display: block;
  }

  .offcanvas-mobile-nav .sidebar-submenu .nav-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem;
  }

  /* Ensure hamburger button is visible and large enough */
  .navbar-toggler {
    display: flex !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: none !important;
  }

  .navbar-toggler:focus {
    box-shadow: none !important;
  }

  /* Top navbar compact */
  #theme-page-navigation.navbar {
    padding: 0.25rem 0.5rem !important;
    min-height: 48px;
  }

  /* Breadcrumb compact */
  .theme-page-breadcrumb {
    font-size: 0.8rem;
  }

  .theme-page-breadcrumb .breadcrumb {
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ===========================================
   3. MAIN CONTENT LAYOUT (MOBILE)
   =========================================== */

@media (max-width: 768px) {
  /* Stack all Bootstrap row columns vertically */
  #theme-page-main .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Override specific column classes that might fight back */
  #theme-page-main .col-md-4,
  #theme-page-main .col-md-6,
  #theme-page-main .col-md-8,
  #theme-page-main .col-lg-3,
  #theme-page-main .col-lg-4,
  #theme-page-main .col-lg-6,
  #theme-page-main .col-lg-8,
  #theme-page-main .col-lg-9,
  #theme-page-main .col-xl-3,
  #theme-page-main .col-xl-4,
  #theme-page-main .col-xl-6,
  #theme-page-main .col-xl-8,
  #theme-page-main .col-xl-9 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Reduce gutters on mobile */
  #theme-page-main .row {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
  }
  
  #theme-page-main .row > * {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/* ===========================================
   4. KPI / DASHBOARD CARDS (MOBILE)
   =========================================== */

@media (max-width: 768px) {
  /* KPI cards: 2 per row on tablet, stacked on phone */
  .card, .panel {
    margin-bottom: 0.5rem !important;
  }

  .card-body, .panel-body {
    padding: 0.75rem !important;
  }

  /* Dashboard stat cards - 2 columns on mobile */
  #theme-page-main .row > [class*="col-"] .card {
    min-height: auto !important;
  }
}

@media (max-width: 576px) {
  /* On very small screens, allow cards to be more compact */
  .card-body, .panel-body {
    padding: 0.5rem !important;
  }

  .card-title, .panel-title {
    font-size: 0.9rem !important;
  }
}

/* ===========================================
   5. ACTION GRIDS (TABLE RESPONSIVENESS)
   =========================================== */

@media (max-width: 768px) {
  /* ActionGrid wrapper: allow horizontal scroll */
  .DnnModule-ActionGrid,
  .action-grid,
  .ag-grid-container,
  [id*="ActionGrid"],
  .DnnModule .ag-grid,
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
    position: relative;
  }

  /* ActionGrid tables - let them scroll but don't force min-width 
     since BS already handles column layout */
  .DnnModule-ActionGrid table {
    table-layout: auto !important;
  }

  /* ActionGrid search/filter bar */
  .ag-grid .ag-search,
  .action-grid .search-container,
  [class*="ag-toolbar"],
  .ag-grid-toolbar {
    flex-wrap: wrap !important;
    gap: 0.25rem;
  }

  .ag-grid .ag-search input,
  .action-grid .search-container input {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ActionGrid pagination compact */
  .DnnModule-ActionGrid .pagination,
  .DnnModule-ActionGrid nav[aria-label*="pagination"] {
    font-size: 0.85rem;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  /* Fade scroll indicator on right edge */
  .DnnModule-ActionGrid::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.04));
    pointer-events: none;
    float: right;
  }
}

/* ===========================================
   6. jqxGrid / jqWidgets (MOBILE)
   =========================================== */

@media (max-width: 768px) {
  /* jqxGrid: horizontal scroll wrapper */
  .jqx-grid,
  .jqx-widget,
  [id*="jqxgrid"],
  [id*="jqxGrid"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 1rem) !important;
    width: 100% !important;
  }

  /* jqxGrid header cells - prevent text crushing */
  .jqx-grid-column-header .jqx-grid-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* jqxGrid toolbar */
  .jqx-grid-toolbar {
    flex-wrap: wrap !important;
    padding: 0.25rem !important;
  }

  .jqx-grid-toolbar input,
  .jqx-grid-toolbar select {
    max-width: 100% !important;
  }

  /* jqx pager compact */
  .jqx-grid-pager {
    flex-wrap: wrap;
    font-size: 0.85rem;
  }
}

/* ===========================================
   6b. ActionGrid TABLE MOBILE OPTIMIZATION
   =========================================== */

@media (max-width: 576px) {
  /* ActionGrid tables: compress columns better on phone */
  .DnnModule-ActionGrid table {
    font-size: 0.82rem !important;
    word-break: break-word;
  }

  .DnnModule-ActionGrid table th,
  .DnnModule-ActionGrid table td {
    padding: 0.35rem 0.3rem !important;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hide less important columns on very small screens */
  /* ActionGrid columns typically: checkbox, main data, action buttons */
  .DnnModule-ActionGrid table th:empty,
  .DnnModule-ActionGrid table td:empty {
    display: none;
  }
}

/* ===========================================
   7. ACTION FORMS (MOBILE)
   =========================================== */

@media (max-width: 768px) {
  /* Stack form fields vertically */
  .actionForm .row > [class*="col-"],
  .action-form .row > [class*="col-"],
  [class*="actionForm"] .row > [class*="col-"],
  .DnnModule .form-group .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Full-width form controls */
  .actionForm input[type="text"],
  .actionForm input[type="number"],
  .actionForm input[type="email"],
  .actionForm input[type="date"],
  .actionForm input[type="datetime-local"],
  .actionForm select,
  .actionForm textarea,
  .form-control,
  .form-select {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  /* Form buttons - full width or wrap nicely */
  .actionForm .form-actions,
  .actionForm .btn-group,
  .action-form .form-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem;
  }

  .actionForm .btn,
  .action-form .btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.5rem 1rem !important;
  }

  /* Labels above inputs (not inline) */
  .actionForm label,
  .action-form label,
  .form-label,
  .control-label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.25rem !important;
  }

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

  .input-group > .form-control,
  .input-group > .form-select {
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* ===========================================
   8. MODALS & POPUPS (MOBILE)
   =========================================== */

@media (max-width: 768px) {
  /* DNN popups / modals should be full-width */
  .modal-dialog,
  .dnn-modal .modal-dialog {
    max-width: calc(100vw - 1rem) !important;
    margin: 0.5rem auto !important;
  }

  .modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }

  /* Action Form popups (openModal) */
  .modal-content {
    border-radius: 0.75rem;
  }

  /* jQuery UI dialogs */
  .ui-dialog {
    width: calc(100vw - 1rem) !important;
    left: 0.5rem !important;
    top: 2rem !important;
    max-height: 90vh !important;
  }

  .ui-dialog .ui-dialog-content {
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
}

/* ===========================================
   9. CHARTS / ANALYTICS (MOBILE)
   =========================================== */

@media (max-width: 768px) {
  /* Force chart grid to single column on phones
     The procurement dashboard uses: row-cols-1 row-cols-sm-2 row-cols-lg-4
     Override sm breakpoint to stay single column until tablet */
  .row[class*="row-cols-sm-2"] {
    --bs-columns: 1 !important;
  }
  .row[class*="row-cols-sm-2"] > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Charts: full width */
  canvas {
    max-width: 100% !important;
    width: 100% !important;
  }

  .chart-container,
  [class*="chart"] {
    max-width: 100% !important;
    overflow: hidden;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  /* Tablet: allow 2 columns for charts */
  .row[class*="row-cols-sm-2"] > * {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* ===========================================
   10. HOME PAGE WIDGETS (MOBILE)
   =========================================== */

@media (max-width: 768px) {
  /* Shortcuts widget */
  .sidebar_stats {
    margin-bottom: 1rem;
  }

  .sidebar_stats li p {
    padding: 0.5rem 0.6rem;
  }

  /* My Approvals / My Requests tables */
  .DnnModule table.table {
    font-size: 0.85rem;
  }

  /* Action buttons in approval tables - bigger touch targets */
  .DnnModule table .btn-sm,
  .DnnModule table .btn-xs,
  .DnnModule table a[class*="btn"] {
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem !important;
  }
}

/* ===========================================
   11. FOOTER (MOBILE)
   =========================================== */

@media (max-width: 768px) {
  #theme-page-footer {
    padding: 0.5rem !important;
    font-size: 0.8rem;
  }

  #theme-page-footer .container-fluid {
    flex-wrap: wrap;
  }
}

/* ===========================================
   12. PRINT STYLES - HIDE MOBILE UI
   =========================================== */

@media print {
  #siteSidebar,
  .navbar-toggler,
  .offcanvas {
    display: none !important;
  }

  #theme-page-main {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ===========================================
   13. TOUCH OPTIMIZATIONS
   =========================================== */

@media (max-width: 768px) {
  /* Increase touch targets globally */
  a, button, [role="button"],
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 36px;
    min-width: 36px;
  }

  /* Checkbox/radio touch area */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
  }

  /* Dropdown menus - larger items */
  .dropdown-menu .dropdown-item {
    padding: 0.6rem 1rem !important;
  }

  /* Select2 / chosen dropdowns */
  .select2-container,
  .chosen-container {
    width: 100% !important;
  }

  .select2-results__option,
  .chosen-results li {
    padding: 0.5rem !important;
    min-height: 36px;
  }
}

/* ===========================================
   14. SPECIFIC PAGE FIXES
   =========================================== */

/* --- Login Page --- */
@media (max-width: 768px) {
  .af-login-hero {
    flex-direction: column !important;
    gap: 0.75rem;
  }

  .af-login-copy {
    min-width: unset !important;
    flex: 1 1 auto !important;
  }

  .af-login-brand {
    flex: 1 1 auto !important;
    min-width: unset !important;
  }

  .af-login-info.alert-info {
    grid-template-columns: 1fr !important;
  }
}

/* --- Procurement Dashboard Charts --- */
@media (max-width: 768px) {
  /* Force single column for chart grid */
  #theme-page-main .row > .col-md-3,
  #theme-page-main .row > .col-lg-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* --- Staff Directory --- */
@media (max-width: 768px) {
  /* Make staff photos smaller */
  .staff-photo,
  .employee-photo,
  img[src*="staff"],
  img[src*="employee"],
  img[src*="photo"] {
    max-width: 48px !important;
    max-height: 48px !important;
    border-radius: 50%;
  }
}

/* ===========================================
   15. SCROLLBAR STYLING (MOBILE)
   =========================================== */

@media (max-width: 768px) {
  /* Thin scrollbars for horizontal-scroll containers */
  .action-grid::-webkit-scrollbar,
  .jqx-grid::-webkit-scrollbar,
  .table-responsive::-webkit-scrollbar {
    height: 4px;
  }

  .action-grid::-webkit-scrollbar-thumb,
  .jqx-grid::-webkit-scrollbar-thumb,
  .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
  }

  .action-grid::-webkit-scrollbar-track,
  .jqx-grid::-webkit-scrollbar-track,
  .table-responsive::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* ===========================================
   16. PlantAnApp/DNN-SPECIFIC OVERRIDES
   =========================================== */

@media (max-width: 768px) {
  /* DNN pane system - full width */
  .DNNEmptyPane,
  .DnnModule {
    width: 100% !important;
    overflow-x: hidden;
  }

  /* DNN content pane */
  #dnn_ContentPane,
  #dnn_LeftPane,
  #dnn_RightPane,
  #ContentPane,
  [id*="ContentPane"] {
    width: 100% !important;
    float: none !important;
    display: block !important;
  }

  /* PlantAnApp / ActionForm specific */
  .af-form-container {
    padding: 0.5rem !important;
  }

  /* AF button bar */
  .af-btn-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem;
  }

  .af-btn-bar .btn {
    flex: 1 1 auto;
    min-width: 120px;
  }

  /* AF tabs - horizontal scroll on mobile */
  .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-bottom: 2px solid var(--bs-border-color);
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
    padding: 0.5rem 1rem;
  }
}

/* ===========================================
   17. NAVXP TILES (MOBILE)
   =========================================== */

@media (max-width: 768px) {
  .navxp-menu-simple .navxp-level > li > a {
    padding: 0.65rem 0.8rem;
    font-size: 0.9rem;
  }
}

/* ===========================================
   18. RESPONSIVE TABLE → CARD PATTERN
   for ActionGrids that look awful as tables on mobile
   =========================================== */

@media (max-width: 576px) {
  /* 
   * Card-mode for action grids:
   * Apply class .jn-mobile-cards to any grid container 
   * to convert table rows into stacked cards.
   * This is opt-in per grid for maximum control.
   */
  .jn-mobile-cards table thead {
    display: none !important;
  }

  .jn-mobile-cards table tbody tr {
    display: block !important;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .jn-mobile-cards table tbody td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-align: right;
  }

  .jn-mobile-cards table tbody td:last-child {
    border-bottom: none;
  }

  .jn-mobile-cards table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    flex: 0 0 40%;
    color: var(--bs-body-color);
    font-size: 0.85rem;
  }
}