/* Custom Mobile Responsiveness Enhancements for Nsanama-WUA Landing Page & Admin Dashboard */

@media (max-width: 768px) {
  /* Prevent horizontal page overflow */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Main Container Full Width */
  .container, .main-content, #root, main, [class*="main"], [class*="content"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  /* Auto-collapsing Sidebar Navigation on Mobile */
  .f-kdjdjs {
    display: block !important;
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
  }

  aside, [class*="sidebar"], [class*="Sidebar"], [class*="drawer"], [class*="nav-panel"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    width: 280px !important;
    max-width: 85vw !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
    box-shadow: 4px 0 12px rgba(0,0,0,0.15) !important;
  }

  aside.open, aside.active, aside.show, aside.expanded,
  [class*="sidebar"].open, [class*="sidebar"].active, [class*="sidebar"].show, [class*="sidebar"].expanded,
  [class*="Sidebar"].open, [class*="Sidebar"].active, [class*="Sidebar"].show, [class*="Sidebar"].expanded,
  [class*="drawer"].open, [class*="drawer"].active, [class*="drawer"].show,
  aside:target, [class*="sidebar"]:target {
    transform: translateX(0) !important;
  }

  /* Dashboard Header & Top Bar */
  header, nav, .navbar, [class*="header"], [class*="topbar"], .j-jejdhs, .jdhgs-kjhds {
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Dashboard Main Feature Content Container */
  .mjdhs-irpe, [class*="page"], [class*="view"], [class*="wrapper"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    display: block !important;
    min-height: calc(100vh - 60px) !important;
  }

  /* Sticky Top Action Toolbar for Customers, Staff, Invoices & Meters */
  .tables-actions-handle, [class*="action-bar"], [class*="toolbar"], .dhshs-oepw {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 55px !important;
    z-index: 998 !important;
    background: #ffffff !important;
    border-bottom: 2px solid #e0e0e0 !important;
    padding: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
  }

  [data-theme=dark] .tables-actions-handle, [data-theme=dark] [class*="action-bar"], [data-theme=dark] [class*="toolbar"] {
    background: #1a1a2e !important;
    border-bottom-color: #2a2a3e !important;
  }

  .actions-items, .actions-items-item, .jssj-lsls, .njsjsj-kslsl, .jjj-pjss {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }

  .actions-items button, .actions-items a, .tables-actions-handle button {
    white-space: nowrap !important;
    min-height: 38px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
  }

  /* Dashboard Stat Cards & Widgets (Home, Customers, Finance, Stats) */
  [class*="card"], [class*="widget"], [class*="stat"], .grid, .card-grid, .row {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Touch-friendly full-width action buttons */
  button, .btn, input[type="submit"], input[type="button"] {
    min-height: 44px !important;
    font-size: 15px !important;
    padding: 10px 16px !important;
    touch-action: manipulation !important;
  }

  /* Modals, Popups & Dialogs on Mobile */
  .modal-dialog, .modal-content, [role="dialog"], [class*="modal"], [class*="popup"] {
    width: 95% !important;
    max-width: 95% !important;
    margin: 12px auto !important;
    padding: 14px !important;
    box-sizing: border-box !important;
  }

  /* Scrollable Data Tables */
  table, [class*="table"] {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Form Input Sizing & iOS Auto-Zoom Prevention */
  input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 480px) {
  h1, .h1 {
    font-size: 1.35rem !important;
  }
  h2, .h2 {
    font-size: 1.15rem !important;
  }
  h3, .h3 {
    font-size: 1.05rem !important;
  }
  .modal-dialog, .modal-content, [role="dialog"] {
    width: 98% !important;
    margin: 6px auto !important;
    padding: 10px !important;
  }
}