/* ═══════════════════════════════════════════════════════════════
   GLOBAL MOBILE & TABLET RESPONSIVE OVERRIDES  v4.1 (v17)
   Loaded AFTER page-specific CSS on every page.
   Breakpoints: 1200, 1100, 1024, 900, 768, 600, 480, 400px
   ═══════════════════════════════════════════════════════════════ */

/* ── Base: fluid images, box-sizing, smooth scroll ───────────── */
*, *::before, *::after { box-sizing: border-box; }
img, video, svg, canvas { max-width: 100%; height: auto; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ── Desktop-first: 1200px (wide tablet / small laptop) ──────── */
@media (max-width: 1200px) {
  .stats-grid,
  .grid-4,
  .pp-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-3,
  .pp-grid-3,
  .charts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Tablet landscape (≤ 1100px) ─────────────────────────────── */
@media (max-width: 1100px) {
  .stats-grid,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .main-content {
    padding: 24px !important;
  }
}

/* ── Tablet portrait / small laptop (≤ 1024px) ───────────────── */
@media (max-width: 1024px) {
  /* Sidebar: collapse to icons-only */
  .sidebar {
    width: 68px !important;
    min-width: 68px !important;
    overflow: hidden;
  }
  .sidebar .nav-text,
  .sidebar .nav-label,
  .sidebar .sidebar-label,
  .sidebar .logo-text,
  .sidebar .sidebar-header span,
  .sidebar .sidebar-header h3,
  .sidebar .sidebar-footer {
    display: none !important;
  }
  .sidebar .nav-link,
  .sidebar .nav-item > a {
    justify-content: center;
    padding: 12px 0 !important;
  }
  .sidebar .nav-link i,
  .sidebar .nav-item > a > i {
    margin-right: 0 !important;
    font-size: 1.15rem;
  }
  .sidebar .logo {
    justify-content: center;
    padding: 16px 8px !important;
  }
  /* Adjust main content to match collapsed sidebar */
  .main-content[style*="margin-left: 250px"],
  .main-content[style*="margin-left:250px"],
  .main-content[style*="margin-left: 260px"],
  .main-content[style*="margin-left:260px"],
  .main-content[style*="margin-left: 280px"],
  .main-content[style*="margin-left:280px"] {
    margin-left: 68px !important;
  }
  .app-container > .main-content {
    margin-left: 0 !important;
  }
  /* Module-specific sidebar collapse: logistics, healthcare, procurement, etc. */
  .logistics-sidebar,
  .procurement-sidebar,
  .healthcare-sidebar,
  .school-sidebar,
  .bookkeeper-sidebar,
  .roaster-sidebar,
  .inventory-sidebar,
  [class*="-sidebar"]:not(.sb-sidebar) {
    width: 68px !important;
    min-width: 68px !important;
    overflow: hidden;
  }
  [class*="-sidebar"]:not(.sb-sidebar) .nav-text,
  [class*="-sidebar"]:not(.sb-sidebar) .sidebar-label,
  [class*="-sidebar"]:not(.sb-sidebar) .sidebar-title {
    display: none !important;
  }
  [class*="-sidebar"]:not(.sb-sidebar) .nav-link {
    justify-content: center;
    padding: 12px 0 !important;
  }
  [class*="-sidebar"]:not(.sb-sidebar) .nav-link i {
    margin-right: 0 !important;
  }
  /* ProperityPro fixed grids */
  .pp-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .pp-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .pp-grid-2 { grid-template-columns: 1fr 1fr !important; }
}

/* ── Mobile / tablet small (≤ 900px) ─────────────────────────── */
@media (max-width: 900px) {
  /* All sidebars: fully hidden, toggled via JS */
  .sidebar,
  .logistics-sidebar,
  .procurement-sidebar,
  .healthcare-sidebar,
  .school-sidebar,
  .bookkeeper-sidebar,
  .roaster-sidebar,
  .inventory-sidebar,
  [class*="-sidebar"]:not(.sb-sidebar) {
    position: fixed !important;
    left: -280px !important;
    top: 0;
    width: 260px !important;
    min-width: 260px !important;
    height: 100vh !important;
    z-index: 9999;
    transition: left 0.3s ease, visibility 0s 0.3s;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    visibility: hidden;
    opacity: 0 !important;
  }
  .sidebar.mobile-open,
  .sidebar.open,
  [class*="-sidebar"].mobile-open,
  [class*="-sidebar"].open {
    left: 0 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3) !important;
    visibility: visible;
    opacity: 1 !important;
    transition: left 0.3s ease, visibility 0s 0s;
  }
  .sidebar.mobile-open ~ .sidebar-overlay,
  [class*="-sidebar"].mobile-open ~ .sidebar-overlay,
  [class*="-sidebar"].open ~ .sidebar-overlay {
    display: block;
  }
  /* Restore text when open on mobile */
  .sidebar.mobile-open .nav-text,
  .sidebar.mobile-open .nav-label,
  .sidebar.mobile-open .sidebar-label,
  .sidebar.mobile-open .logo-text,
  .sidebar.mobile-open .sidebar-header span,
  .sidebar.mobile-open .sidebar-header h3,
  .sidebar.mobile-open .sidebar-footer,
  [class*="-sidebar"].mobile-open .nav-text,
  [class*="-sidebar"].mobile-open .sidebar-label,
  [class*="-sidebar"].mobile-open .sidebar-title,
  [class*="-sidebar"].open .nav-text,
  [class*="-sidebar"].open .sidebar-label {
    display: initial !important;
  }
  .sidebar.mobile-open .nav-link,
  .sidebar.mobile-open .nav-item > a,
  [class*="-sidebar"].mobile-open .nav-link,
  [class*="-sidebar"].open .nav-link {
    justify-content: flex-start;
    padding: 12px 20px !important;
  }
  .sidebar.mobile-open .nav-link i,
  .sidebar.mobile-open .nav-item > a > i,
  [class*="-sidebar"].mobile-open .nav-link i,
  [class*="-sidebar"].open .nav-link i {
    margin-right: 12px !important;
  }
  /* Main content: full width */
  .main-content,
  .content-area,
  .dashboard-content,
  .module-content {
    margin-left: 0 !important;
    padding: 20px 16px !important;
    width: 100% !important;
  }
  /* Header area: stack */
  .header-area,
  .page-header,
  .module-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
  }
  .header-area .header-actions,
  .header-area .header-right,
  .page-header .header-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Page titles */
  .page-title,
  .section-title {
    font-size: 1.4rem !important;
  }
  /* Stats */
  .stats-grid,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .stat-card {
    padding: 16px !important;
  }
  .stat-value {
    font-size: 1.5rem !important;
  }
  /* Grid reductions */
  .grid-3 {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Charts grid stack */
  .charts-grid,
  .charts-row,
  .chart-row,
  .dashboard-charts {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  .charts-grid > *,
  .charts-row > *,
  .chart-row > * {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Mobile sidebar toggle button (injected by JS) */
  .mobile-sidebar-toggle {
    display: flex !important;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ch-primary, var(--primary-color, #6366f1));
    color: #fff;
    border: none;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 16px rgba(99,102,241,0.4);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* Sidebar backdrop overlay */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
    cursor: pointer;
  }
  /* Storefront builder sidebar */
  .sb-sidebar,
  .storefront-sidebar {
    width: 280px !important;
    left: -300px;
  }
  .sb-sidebar.mobile-open,
  .storefront-sidebar.mobile-open {
    left: 0;
  }
}

/* ── Phone landscape (≤ 768px) ────────────────────────────────── */
@media (max-width: 768px) {
  .stats-grid,
  .grid-4,
  .grid-3,
  .grid-2,
  .pp-grid-4,
  .pp-grid-3,
  .pp-grid-2,
  .charts-grid {
    grid-template-columns: 1fr !important;
  }
  .action-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }
  /* Cards */
  .card {
    border-radius: 12px !important;
  }
  .card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
  }
  .card-body {
    padding: 16px !important;
  }
  /* Tables: ensure horizontal scroll */
  .table-responsive,
  .card-body:has(table),
  .card:has(table),
  .table-wrap,
  [class*="table-container"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 600px;
  }
  table th,
  table td {
    padding: 10px 12px !important;
    font-size: 0.82rem !important;
    white-space: nowrap;
  }
  /* Tabs */
  .tabs,
  .tab-list,
  .nav-tabs,
  .tab-bar,
  .module-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar,
  .tab-list::-webkit-scrollbar,
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .tab,
  .tab-btn,
  .nav-tabs .nav-link {
    white-space: nowrap;
    font-size: 0.8rem !important;
    padding: 8px 12px !important;
    flex-shrink: 0;
  }
  /* Modals */
  .modal-content,
  .modal-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 12px auto !important;
    border-radius: 12px !important;
  }
  .modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }
  /* Forms */
  .form-row,
  .form-group-row,
  .form-inline {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .form-group {
    width: 100% !important;
  }
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Badge wrapping */
  .badge {
    font-size: 0.7rem !important;
  }
  /* Buttons group wrap */
  .btn-group,
  .button-group {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Split/two-pane views stack */
  .recon-split,
  .split-view,
  .split-pane,
  .two-pane {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .recon-split > *,
  .split-view > *,
  .split-pane > *,
  .two-pane > * {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Pipeline / kanban horizontal scroll */
  .pipeline-board,
  .kanban-board,
  [class*="pipeline"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 8px;
  }
  .pipeline-column,
  .kanban-column {
    min-width: 280px;
    flex-shrink: 0;
  }
  /* Treasury sidebar narrow */
  .treasury-sidebar {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  .treasury-sidebar.mobile-open {
    width: 260px !important;
    min-width: 260px !important;
  }
  /* Map containers */
  .map-container,
  .leaflet-container,
  #map {
    height: 300px !important;
    min-height: 250px;
    width: 100% !important;
  }
  /* iframes: full width */
  iframe {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Phone portrait (≤ 600px) ─────────────────────────────────── */
@media (max-width: 600px) {
  .main-content {
    padding: 12px !important;
  }
  .page-title,
  .section-title {
    font-size: 1.2rem !important;
  }
  .stat-value {
    font-size: 1.3rem !important;
  }
  .stat-card {
    padding: 12px !important;
  }
  .stat-label {
    font-size: 0.72rem !important;
  }
  .card-header {
    padding: 12px !important;
  }
  .card-body {
    padding: 12px !important;
  }
  /* Action grid single col */
  .action-grid {
    grid-template-columns: 1fr !important;
  }
  .action-item {
    padding: 14px !important;
  }
  /* Hide less important table columns on very small screens */
  table .hide-mobile,
  table .hide-sm {
    display: none !important;
  }
  /* Full-width buttons on mobile */
  .btn-primary,
  .btn-outline,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  /* Org pills / module badges compact */
  .org-pill,
  .module-badge {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
  }
  /* Rota / schedule grids */
  .rota-grid,
  .schedule-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Small phone (≤ 480px) ────────────────────────────────────── */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .stat-card {
    padding: 10px !important;
  }
  .stat-value {
    font-size: 1.1rem !important;
  }
  .page-title {
    font-size: 1.05rem !important;
  }
  /* Stack any remaining 2-col layouts */
  .grid-2-sm,
  .flex-row-sm {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  /* Compact header */
  .page-header,
  .module-header {
    padding: 12px !important;
  }
  /* Search bars full width */
  .search-bar,
  .search-input,
  [class*="search-"] input {
    width: 100% !important;
  }
}

/* ── Tiny phone (≤ 400px) ─────────────────────────────────────── */
@media (max-width: 400px) {
  body {
    font-size: 14px !important;
  }
  .main-content {
    padding: 8px !important;
  }
  .card {
    border-radius: 8px !important;
  }
  .card-body {
    padding: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MEGA-DROPDOWN INLINE COLUMNS & CHAT WIDGET — MOBILE
   Covers erp_home.html inline-styled dropdown <div> columns
   and the chat widget positioning
   ═══════════════════════════════════════════════════════════════ */

/* --- Mega-dropdown inline flex columns: unset min-widths on mobile --- */
@media (max-width: 900px) {
  /* Dropdown <li> with display:flex → stack columns */
  .dropdown-menu > li[style*="display:flex"],
  .dropdown-menu li[style*="display:flex"] {
    flex-direction: column !important;
    gap: 8px !important;
  }
  /* Dropdown <div> columns inside: remove min-width, border, full width */
  .dropdown-menu li > div[style*="min-width"],
  .dropdown-menu li > div[style*="flex:1"] {
    min-width: unset !important;
    width: 100% !important;
    border-left: none !important;
    padding: 0 0.5rem !important;
  }
  /* Dropdown menus themselves: override inline min-width */
  .dropdown-menu[style*="min-width"],
  .dropdown-menu[style*="min-Width"],
  ul.dropdown-menu[style] {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* --- Chat widget mobile --- */
@media (max-width: 600px) {
  #chatWidget {
    bottom: 16px !important;
    right: 12px !important;
  }
  #chatToggleBtn {
    width: 52px !important;
    height: 52px !important;
  }
  #chatWindow {
    right: -12px !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 100px) !important;
    border-radius: 16px !important;
  }
}
@media (max-width: 480px) {
  #chatWidget {
    bottom: 12px !important;
    right: 8px !important;
  }
  #chatWindow {
    right: -8px !important;
    bottom: 65px !important;
    width: calc(100vw - 12px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MARKETPLACE / LANDING PAGE RESPONSIVE
   Covers navbar, hero, feature-grids, pricing, CTA sections
   ═══════════════════════════════════════════════════════════════ */

/* ── Navbar mobile ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-menu {
    display: none !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 80vw;
    max-width: 320px;
    height: 100vh;
    background: var(--glass-bg, rgba(15,23,42,0.97));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 80px 24px 24px;
    z-index: 9999;
    overflow-y: auto;
    box-shadow: 4px 0 32px rgba(0,0,0,0.4);
    gap: 4px;
  }
  .nav-menu.mobile-open {
    display: flex !important;
  }
  .nav-menu li {
    width: 100%;
  }
  .nav-menu .nav-link,
  .nav-menu a {
    padding: 12px 16px !important;
    width: 100%;
    display: block;
    border-radius: 8px;
  }
  /* Hamburger toggle */
  .mobile-menu-toggle,
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10001;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
  }
  .mobile-menu-toggle:hover,
  .mobile-menu-btn:hover,
  .mobile-menu-toggle:focus-visible,
  .mobile-menu-btn:focus-visible {
    background: rgba(255,255,255,0.18);
    outline: none;
  }
  /* Nav action group */
  .nav-actions,
  .action-group {
    gap: 8px !important;
  }
  /* Dropdowns in mobile nav */
  .nav-menu .dropdown-menu,
  .nav-menu .mega-menu,
  .nav-menu .dropdown-content {
    position: static !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    margin-top: 4px;
    padding: 8px !important;
    max-height: 60vh;
    overflow-y: auto;
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    transform: none !important;
    left: auto !important;
  }
  /* Mega-dropdown column stacking */
  .dropdown-columns {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .dropdown-column {
    min-width: unset !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
  }
  .navbar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
    cursor: pointer;
  }
  .navbar-overlay.active {
    display: block;
  }
  /* Marketplace search bar compact */
  .marketplace-search,
  .search-bar-container {
    flex-direction: column !important;
    gap: 8px;
  }
  .marketplace-search input,
  .search-bar-container input {
    width: 100% !important;
  }
  .marketplace-search .search-btn {
    width: 100%;
  }
}
@media (min-width: 901px) {
  .mobile-menu-toggle,
  .mobile-menu-btn {
    display: none !important;
  }
}

/* ── Hero sections ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero,
  .hero-section,
  [class*="hero"] {
    padding: 48px 16px !important;
    min-height: auto !important;
    text-align: center;
  }
  .hero h1,
  .hero-section h1 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }
  .hero p,
  .hero-section p {
    font-size: 1rem !important;
  }
  .hero-buttons,
  .hero-actions,
  .cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .hero-buttons .btn,
  .hero-actions .btn,
  .cta-buttons a {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
  .hero-image,
  .hero-visual,
  .hero-illustration {
    max-width: 100%;
    margin-top: 24px;
  }
}
@media (max-width: 600px) {
  .hero h1,
  .hero-section h1 {
    font-size: 1.5rem !important;
  }
  .hero p,
  .hero-section p {
    font-size: 0.9rem !important;
  }
}

/* ── Feature / module grids ───────────────────────────────────── */
@media (max-width: 1024px) {
  .features-grid,
  .modules-grid,
  .pricing-grid,
  .partners-grid,
  .card-grid,
  [class*="grid-cols-3"],
  .grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .features-grid,
  .modules-grid,
  .pricing-grid,
  .partners-grid,
  .card-grid,
  [class*="grid-cols-3"],
  [class*="grid-cols-2"],
  .grid-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── Pricing tables ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .pricing-card,
  .price-card {
    max-width: 100% !important;
    margin: 0 !important;
  }
  .pricing-toggle,
  .billing-toggle {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}

/* ── Section padding reductions ───────────────────────────────── */
@media (max-width: 768px) {
  section,
  .section,
  [class*="section"]:not(.hero-section) {
    padding: 40px 16px !important;
  }
  section h2,
  .section h2 {
    font-size: 1.5rem !important;
  }
}
@media (max-width: 600px) {
  section,
  .section,
  [class*="section"]:not(.hero-section) {
    padding: 32px 12px !important;
  }
  section h2,
  .section h2 {
    font-size: 1.3rem !important;
  }
}

/* ── Footer responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-grid,
  .footer-columns,
  footer .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  footer {
    padding: 32px 16px !important;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .footer-grid,
  .footer-columns,
  footer .grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Testimonials / carousel ──────────────────────────────────── */
@media (max-width: 768px) {
  .testimonial-grid,
  .reviews-grid {
    grid-template-columns: 1fr !important;
  }
  .testimonial-card {
    padding: 20px !important;
  }
}

/* ── Flex layouts force stack on mobile ───────────────────────── */
@media (max-width: 768px) {
  .flex-row-desktop,
  .split-layout,
  .two-col,
  [class*="flex-row"] {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .flex-row-desktop > *,
  .split-layout > *,
  .two-col > * {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MARKETPLACE PRODUCT PAGES — MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Marketplace filters: slide-in drawer */
  .marketplace-filters,
  .sidebar-filters,
  .filter-panel {
    position: fixed !important;
    left: -300px;
    top: 0;
    width: 280px !important;
    height: 100vh;
    z-index: 9999;
    transition: left 0.3s ease;
    background: var(--card-bg, #fff);
    box-shadow: 4px 0 24px rgba(0,0,0,0.2);
    overflow-y: auto;
    padding: 20px 16px !important;
  }
  .marketplace-filters.open,
  .sidebar-filters.open,
  .filter-panel.open {
    left: 0;
  }
  .marketplace-content,
  .products-area {
    margin-left: 0 !important;
    width: 100% !important;
  }
  /* Cart drawer: full width on phone */
  .cart-drawer,
  .cart-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  /* Product detail modal: near full screen */
  .product-detail-modal {
    width: 100vw !important;
    height: 95vh !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
    top: auto !important;
    bottom: 0 !important;
  }
}
@media (max-width: 768px) {
  .product-grid,
  .marketplace-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 480px) {
  .product-grid,
  .marketplace-grid {
    grid-template-columns: 1fr !important;
  }
  .product-card {
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   STOREFRONT / WEBSITE BUILDER RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sb-layout {
    grid-template-columns: 1fr !important;
  }
  .sb-sidebar {
    position: fixed !important;
    left: -320px;
    top: 0;
    width: 300px !important;
    height: 100vh;
    z-index: 9999;
    transition: left 0.3s ease;
    overflow-y: auto;
  }
  .sb-sidebar.mobile-open {
    left: 0;
  }
  .sb-canvas,
  .sb-preview-area,
  .wb-canvas {
    width: 100% !important;
    margin-left: 0 !important;
  }
}
@media (max-width: 768px) {
  .sb-topbar,
  .wb-topbar {
    flex-wrap: wrap !important;
    gap: 8px;
    padding: 8px 12px !important;
  }
  .sb-viewport-buttons {
    display: none !important;
  }
  .sb-preview-frame,
  .wb-preview-frame {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   POS MODULE — MOBILE (full-viewport layout)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pos-layout,
  .pos-container {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  .pos-products,
  .pos-product-area {
    width: 100% !important;
    height: auto !important;
    min-height: 50vh;
  }
  .pos-cart,
  .cart-panel {
    width: 100% !important;
    height: auto !important;
    max-height: 50vh;
    overflow-y: auto;
    position: relative !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CRYPTO / BITCOIN SUBDOMAIN — MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .crypto-hero,
  .bitcoin-hero {
    padding: 40px 16px !important;
  }
  .crypto-hero h1,
  .bitcoin-hero h1 {
    font-size: 1.6rem !important;
  }
  .crypto-stats,
  .wallet-grid {
    grid-template-columns: 1fr !important;
  }
  .chart-container {
    height: 250px !important;
    min-height: 200px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL UTILITY: TOUCH TARGETS & SAFE AREAS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Ensure touch-friendly target sizes */
  a, button, .btn, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Prevent horizontal overflow globally */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  /* Scroll snap on horizontal scroll containers */
  .horizontal-scroll {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .horizontal-scroll > * {
    scroll-snap-align: start;
  }
  /* Safe area insets for notched phones */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-sidebar-toggle {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* ── Utility: hide mobile sidebar toggle on desktop ──────────── */
.mobile-sidebar-toggle {
  display: none;
}
@media (max-width: 900px) {
  .mobile-sidebar-toggle {
    display: flex !important;
    position: fixed;
    bottom: 20px;
    left: 16px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1a2942, #0f172a);
    color: #e2e8f0;
    border: 1.5px solid rgba(99, 102, 241, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 9998;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE orientation: reduce wasted vertical space
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) {
  /* Reduce navbar height */
  .navbar, nav { padding-top: 4px !important; padding-bottom: 4px !important; }
  .logo svg, .logo-icon, .enhanced-logo-icon { width: 28px !important; height: 28px !important; }
  .logo { font-size: 1rem !important; }
  /* Reduce hero padding */
  .hero, [class*="hero"] { padding-top: 2rem !important; padding-bottom: 1.5rem !important; min-height: auto !important; }
  .hero h1, [class*="hero"] h1 { font-size: 1.5rem !important; }
  /* Module cards — horizontal scroll */
  .module-cards, .module-grid, .card-grid { 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; 
  }
  /* Sidebar toggle smaller in landscape */
  .mobile-sidebar-toggle { width: 40px !important; height: 40px !important; bottom: 10px !important; left: 10px !important; font-size: 1rem !important; }
  /* Footer columns */
  .footer-grid, .footer-columns { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET landscape (768-1024px landscape): content shouldn't be cropped
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .erp-container { overflow: auto !important; }
  .main-content { width: 100% !important; margin-left: 0 !important; }
  .sidebar { position: fixed !important; z-index: 9999 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PRINT: clean output
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .sidebar,
  [class*="-sidebar"],
  .mobile-sidebar-toggle,
  .sidebar-overlay,
  .navbar-overlay,
  .mobile-menu-toggle,
  nav,
  footer {
    display: none !important;
  }
  .main-content,
  .content-area {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v4.0 — COMPREHENSIVE MODULE-SPECIFIC MOBILE OVERRIDES
   Covers ALL prefixed module layouts, sidebars, dashboards,
   landing pages, and sub-domain patterns.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Prefixed sidebar collapse (≤1024px — icons only) ─────── */
@media (max-width: 1024px) {
  .accounting-sidebar,
  .agro-sidebar,
  .mkt-sidebar,
  .bk-sidebar,
  .pp-sidebar,
  .pay-sidebar,
  .tt-sidebar {
    width: 68px !important;
    min-width: 68px !important;
    overflow: hidden;
  }
  .accounting-sidebar .nav-text,
  .accounting-sidebar .sidebar-label,
  .accounting-sidebar .sidebar-title,
  .agro-sidebar .nav-text,
  .agro-sidebar .sidebar-label,
  .agro-sidebar .sidebar-title,
  .mkt-sidebar .nav-text,
  .mkt-sidebar .sidebar-label,
  .mkt-sidebar .sidebar-title,
  .bk-sidebar .nav-text,
  .bk-sidebar .sidebar-label,
  .bk-sidebar .sidebar-title,
  .pp-sidebar .nav-text,
  .pp-sidebar .sidebar-label,
  .pp-sidebar .sidebar-title,
  .pay-sidebar .nav-text,
  .pay-sidebar .sidebar-label,
  .pay-sidebar .sidebar-title,
  .tt-sidebar .nav-text,
  .tt-sidebar .sidebar-label,
  .tt-sidebar .sidebar-title {
    display: none !important;
  }
  .accounting-sidebar .nav-link,
  .agro-sidebar .nav-link,
  .mkt-sidebar .nav-link,
  .bk-sidebar .nav-link,
  .pp-sidebar .nav-link,
  .pay-sidebar .nav-link,
  .tt-sidebar .nav-link {
    justify-content: center;
    padding: 12px 0 !important;
  }
  .accounting-sidebar .nav-link i,
  .agro-sidebar .nav-link i,
  .mkt-sidebar .nav-link i,
  .bk-sidebar .nav-link i,
  .pp-sidebar .nav-link i,
  .pay-sidebar .nav-link i,
  .tt-sidebar .nav-link i {
    margin-right: 0 !important;
  }
  /* Adjust main content beside prefixed sidebars */
  .acct-main,
  .agro-main,
  .mkt-main,
  .bk-main,
  .pp-main-content,
  .pay-main,
  .tt-main,
  .module-main {
    margin-left: 68px !important;
  }
}

/* ── 2. Prefixed sidebar off-canvas (≤900px) ─────────────────── */
@media (max-width: 900px) {
  .accounting-sidebar,
  .agro-sidebar,
  .mkt-sidebar,
  .bk-sidebar,
  .pp-sidebar,
  .pay-sidebar,
  .tt-sidebar {
    position: fixed !important;
    left: -280px;
    top: 0;
    width: 260px !important;
    min-width: 260px !important;
    height: 100vh !important;
    z-index: 9999;
    transition: left 0.3s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .accounting-sidebar.mobile-open,
  .agro-sidebar.mobile-open,
  .mkt-sidebar.mobile-open,
  .bk-sidebar.mobile-open,
  .pp-sidebar.mobile-open,
  .pay-sidebar.mobile-open,
  .tt-sidebar.mobile-open {
    left: 0;
  }
  /* Restore text when sidebar is open on mobile */
  .accounting-sidebar.mobile-open .nav-text,
  .accounting-sidebar.mobile-open .sidebar-label,
  .accounting-sidebar.mobile-open .sidebar-title,
  .agro-sidebar.mobile-open .nav-text,
  .agro-sidebar.mobile-open .sidebar-label,
  .agro-sidebar.mobile-open .sidebar-title,
  .mkt-sidebar.mobile-open .nav-text,
  .mkt-sidebar.mobile-open .sidebar-label,
  .mkt-sidebar.mobile-open .sidebar-title,
  .bk-sidebar.mobile-open .nav-text,
  .bk-sidebar.mobile-open .sidebar-label,
  .bk-sidebar.mobile-open .sidebar-title,
  .pp-sidebar.mobile-open .nav-text,
  .pp-sidebar.mobile-open .sidebar-label,
  .pp-sidebar.mobile-open .sidebar-title,
  .pay-sidebar.mobile-open .nav-text,
  .pay-sidebar.mobile-open .sidebar-label,
  .pay-sidebar.mobile-open .sidebar-title,
  .tt-sidebar.mobile-open .nav-text,
  .tt-sidebar.mobile-open .sidebar-label,
  .tt-sidebar.mobile-open .sidebar-title {
    display: initial !important;
  }
  .accounting-sidebar.mobile-open .nav-link,
  .agro-sidebar.mobile-open .nav-link,
  .mkt-sidebar.mobile-open .nav-link,
  .bk-sidebar.mobile-open .nav-link,
  .pp-sidebar.mobile-open .nav-link,
  .pay-sidebar.mobile-open .nav-link,
  .tt-sidebar.mobile-open .nav-link {
    justify-content: flex-start;
    padding: 12px 20px !important;
  }
  .accounting-sidebar.mobile-open .nav-link i,
  .agro-sidebar.mobile-open .nav-link i,
  .mkt-sidebar.mobile-open .nav-link i,
  .bk-sidebar.mobile-open .nav-link i,
  .pp-sidebar.mobile-open .nav-link i,
  .pay-sidebar.mobile-open .nav-link i,
  .tt-sidebar.mobile-open .nav-link i {
    margin-right: 12px !important;
  }
  /* Main content full width when sidebar hidden */
  .acct-main,
  .agro-main,
  .mkt-main,
  .bk-main,
  .pp-main-content,
  .pay-main,
  .tt-main,
  .module-main,
  .acct-wrapper > :not([class*="sidebar"]),
  .agro-wrapper > :not([class*="sidebar"]),
  .mkt-wrapper > :not([class*="sidebar"]) {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ── 3. AgroPro module (agro-* classes) ──────────────────────── */
@media (max-width: 1024px) {
  .agro-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .agro-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .agro-stats,
  .agro-grid-3,
  .agro-grid-2,
  .agro-chart-grid,
  .agro-activities { grid-template-columns: 1fr !important; }
  .agro-hero { padding: 40px 16px !important; text-align: center; }
  .agro-hero h1 { font-size: 1.6rem !important; }
  .agro-card { border-radius: 12px !important; }
  .agro-card-body { padding: 16px !important; }
  .agro-header { flex-direction: column !important; gap: 12px; }
  .agro-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
  .agro-stats { gap: 8px !important; }
  .agro-stat-value { font-size: 1.1rem !important; }
}

/* ── 4. Sales module (sl-* classes) ──────────────────────────── */
@media (max-width: 1024px) {
  .sl-features-grid,
  .sl-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .sl-hero { padding: 48px 16px !important; text-align: center; }
  .sl-hero h1 { font-size: 1.7rem !important; }
  .sl-hero p { font-size: 1rem !important; }
  .sl-features-grid,
  .sl-stats-grid,
  .sl-pricing-grid,
  .sl-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .sl-hero-buttons { flex-direction: column !important; align-items: center !important; gap: 12px; }
  .sl-hero-buttons .btn,
  .sl-hero-buttons a { width: 100%; max-width: 300px; text-align: center; }
  .sl-section { padding: 40px 16px !important; }
  .sl-section h2 { font-size: 1.4rem !important; }
  .sl-card { padding: 20px !important; }
}
@media (max-width: 480px) {
  .sl-hero h1 { font-size: 1.4rem !important; }
  .sl-section { padding: 32px 12px !important; }
}

/* ── 5. Commercial Vehicles (cv-* classes) ───────────────────── */
@media (max-width: 1024px) {
  .cv-fleet-grid,
  .cv-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .cv-hero { padding: 48px 16px !important; text-align: center; }
  .cv-hero h1 { font-size: 1.7rem !important; }
  .cv-fleet-grid,
  .cv-features-grid,
  .cv-stats-grid,
  .cv-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .cv-hero-buttons { flex-direction: column !important; align-items: center !important; gap: 12px; }
  .cv-section { padding: 40px 16px !important; }
  .cv-section h2 { font-size: 1.4rem !important; }
  .cv-card { padding: 20px !important; border-radius: 12px !important; }
}

/* ── 6. Trade Central (tc-* classes) ─────────────────────────── */
@media (max-width: 1024px) {
  .tc-features-grid,
  .tc-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .tc-hero { padding: 48px 16px !important; text-align: center; }
  .tc-hero h1 { font-size: 1.7rem !important; }
  .tc-features-grid,
  .tc-stats-grid,
  .tc-pricing-grid,
  .tc-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .tc-hero-buttons { flex-direction: column !important; align-items: center !important; gap: 12px; }
  .tc-section { padding: 40px 16px !important; }
  .tc-section h2 { font-size: 1.4rem !important; }
  .tc-card { padding: 20px !important; }
}

/* ── 7. Trade Finance (tf-* classes) ─────────────────────────── */
@media (max-width: 1024px) {
  .tf-products-grid,
  .tf-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .tf-hero { padding: 48px 16px !important; text-align: center; }
  .tf-hero h1 { font-size: 1.7rem !important; }
  .tf-products-grid,
  .tf-features-grid,
  .tf-stats-grid,
  .tf-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .tf-hero-buttons { flex-direction: column !important; align-items: center !important; gap: 12px; }
  .tf-section { padding: 40px 16px !important; }
  .tf-section h2 { font-size: 1.4rem !important; }
  .tf-card { padding: 20px !important; }
}

/* ── 8. Flight & Freight (ff-* classes) ──────────────────────── */
@media (max-width: 1024px) {
  .ff-services-grid,
  .ff-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .ff-hero { padding: 48px 16px !important; text-align: center; }
  .ff-hero h1 { font-size: 1.7rem !important; }
  .ff-services-grid,
  .ff-features-grid,
  .ff-stats-grid,
  .ff-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ff-hero-buttons { flex-direction: column !important; align-items: center !important; gap: 12px; }
  .ff-section { padding: 40px 16px !important; }
  .ff-section h2 { font-size: 1.4rem !important; }
  .ff-card { padding: 20px !important; }
  /* Hide decorative elements that overflow */
  .ff-cloud,
  .ff-flight-path,
  .ff-plane-trail { display: none !important; }
}

/* ── 9. Help Centre (hc-* classes) ───────────────────────────── */
@media (max-width: 1024px) {
  .hc-categories-grid,
  .hc-articles-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .hc-hero { padding: 48px 16px !important; text-align: center; }
  .hc-hero h1 { font-size: 1.7rem !important; }
  .hc-categories-grid,
  .hc-articles-grid,
  .hc-faq-grid,
  .hc-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .hc-search-bar { flex-direction: column !important; gap: 8px; }
  .hc-search-bar input { width: 100% !important; }
  .hc-section { padding: 40px 16px !important; }
  .hc-section h2 { font-size: 1.4rem !important; }
  .hc-card { padding: 20px !important; }
}

/* ── 10. Commercial Assets (ia-* classes) ────────────────────── */
@media (max-width: 1024px) {
  .ia-categories-grid,
  .ia-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .ia-hero { padding: 48px 16px !important; text-align: center; }
  .ia-hero h1 { font-size: 1.7rem !important; }
  .ia-categories-grid,
  .ia-features-grid,
  .ia-stats-grid,
  .ia-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ia-hero-buttons { flex-direction: column !important; align-items: center !important; gap: 12px; }
  .ia-section { padding: 40px 16px !important; }
  .ia-section h2 { font-size: 1.4rem !important; }
  .ia-card { padding: 20px !important; }
  /* Hide decorative cog elements that overflow */
  .ia-cog { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCOUNTING MODULE — DEEP MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .acct-wrapper {
    flex-direction: column !important;
  }
  .acct-tabs,
  .accounting-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .acct-tabs::-webkit-scrollbar,
  .accounting-tabs::-webkit-scrollbar { display: none; }
  .journal-split,
  .acct-split-view,
  .reconciliation-panel {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .journal-split > *,
  .acct-split-view > * {
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  .acct-stats-grid,
  .acct-grid-4,
  .acct-grid-3 { grid-template-columns: 1fr !important; }
  .acct-chart-row { grid-template-columns: 1fr !important; }
  .invoice-header,
  .acct-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
  }
  .acct-amount { font-size: 1.2rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CRM MODULE — DEEP MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .crm-pipeline,
  .crm-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 12px;
  }
  .crm-pipeline-column,
  .crm-stage {
    min-width: 260px;
    flex-shrink: 0;
  }
  .crm-detail-panel {
    position: fixed !important;
    right: -100vw;
    top: 0;
    width: 90vw !important;
    max-width: 400px;
    height: 100vh;
    z-index: 9999;
    transition: right 0.3s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.2);
  }
  .crm-detail-panel.open {
    right: 0;
  }
}
@media (max-width: 768px) {
  .crm-stats-grid,
  .crm-grid-4,
  .crm-grid-3 { grid-template-columns: 1fr !important; }
  .crm-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .crm-contact-card {
    flex-direction: column !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HR MODULE — DEEP MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hr-stats-grid,
  .hr-grid-4,
  .hr-grid-3,
  .hr-dashboard-grid { grid-template-columns: 1fr !important; }
  .hr-employee-card {
    flex-direction: column !important;
    text-align: center;
  }
  .hr-employee-avatar {
    margin: 0 auto 12px;
  }
  .hr-org-chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hr-header {
    flex-direction: column !important;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   INVENTORY MODULE — DEEP MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .inv-stats-grid,
  .inv-grid-4,
  .inv-grid-3,
  .inventory-stats { grid-template-columns: 1fr !important; }
  .inv-header,
  .inventory-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .inv-product-detail {
    flex-direction: column !important;
  }
  .inv-product-image {
    width: 100% !important;
    max-height: 200px;
    object-fit: cover;
  }
  .inv-filters {
    flex-direction: column !important;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MARKETING MODULE — DEEP MOBILE OVERRIDES (mkt-*)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .mkt-wrapper {
    flex-direction: column !important;
  }
  .mkt-campaign-builder {
    flex-direction: column !important;
    gap: 16px;
  }
  .mkt-campaign-builder > * {
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  .mkt-stats-grid,
  .mkt-grid-4,
  .mkt-grid-3 { grid-template-columns: 1fr !important; }
  .mkt-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .mkt-chart-row { grid-template-columns: 1fr !important; }
  .mkt-campaign-card { padding: 16px !important; }
  .mkt-audience-segment {
    flex-direction: column !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BOOKKEEPER MODULE — DEEP MOBILE OVERRIDES (bk-*)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .bk-wrapper {
    flex-direction: column !important;
  }
  .bk-notes-sidebar {
    position: fixed !important;
    right: -300px;
    top: 0;
    width: 280px !important;
    height: 100vh;
    z-index: 9998;
    transition: right 0.3s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.2);
    overflow-y: auto;
  }
  .bk-notes-sidebar.open {
    right: 0;
  }
}
@media (max-width: 768px) {
  .bk-stats-grid,
  .bk-grid-4,
  .bk-grid-3,
  .bk-chart-grid { grid-template-columns: 1fr !important; }
  .bk-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .bk-card-body { padding: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PAYROLL MODULE — DEEP MOBILE OVERRIDES (pay-*)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pay-wrapper {
    flex-direction: column !important;
  }
}
@media (max-width: 768px) {
  .pay-stats-grid,
  .pay-grid-4,
  .pay-grid-3 { grid-template-columns: 1fr !important; }
  .pay-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .pay-run-summary {
    flex-direction: column !important;
    gap: 16px;
  }
  .pay-employee-row {
    flex-direction: column !important;
    gap: 8px;
  }
  .payslip-detail {
    padding: 16px !important;
  }
  .payslip-header {
    flex-direction: column !important;
    text-align: center;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PROPERTYPRO MODULE — DEEP MOBILE OVERRIDES (pp-*)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pp-wrapper {
    flex-direction: column !important;
  }
}
@media (max-width: 768px) {
  .pp-property-card {
    flex-direction: column !important;
  }
  .pp-property-image {
    width: 100% !important;
    max-height: 200px;
    object-fit: cover;
    border-radius: 12px 12px 0 0 !important;
  }
  .pp-stats-grid { grid-template-columns: 1fr !important; }
  .pp-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .pp-tenant-info {
    flex-direction: column !important;
    text-align: center;
  }
  .pp-map-container { height: 250px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TIME TRACKER MODULE — DEEP MOBILE OVERRIDES (tt-*)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tt-wrapper {
    flex-direction: column !important;
  }
}
@media (max-width: 768px) {
  .tt-stats-grid,
  .tt-grid-4,
  .tt-grid-3 { grid-template-columns: 1fr !important; }
  .tt-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .tt-timer-display {
    font-size: 2rem !important;
  }
  .tt-timesheet-grid { grid-template-columns: 1fr !important; }
  .tt-project-row {
    flex-direction: column !important;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SCHOOL MODULE — DEEP MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .school-stats-grid,
  .school-grid-4,
  .school-grid-3 { grid-template-columns: 1fr !important; }
  .school-timetable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .school-student-card {
    flex-direction: column !important;
    text-align: center;
  }
  .school-header {
    flex-direction: column !important;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   NGO MODULE — DEEP MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ngo-stats-grid,
  .ngo-grid-4,
  .ngo-grid-3 { grid-template-columns: 1fr !important; }
  .ngo-donor-card {
    flex-direction: column !important;
    text-align: center;
  }
  .ngo-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .ngo-project-card {
    padding: 16px !important;
  }
  .ngo-campaign-progress {
    flex-direction: column !important;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TREASURY / BANKING / CAPITAL — DEEP MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .treasury-stats-grid,
  .treasury-grid { grid-template-columns: 1fr !important; }
  .treasury-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .treasury-chart-row { grid-template-columns: 1fr !important; }
  .banking-accounts-grid { grid-template-columns: 1fr !important; }
  .banking-transaction-row {
    flex-direction: column !important;
    gap: 4px;
  }
  .capital-stats-grid { grid-template-columns: 1fr !important; }
  .capital-header {
    flex-direction: column !important;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ACQUISITION MODULE — DEEP MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .acquisition-stats-grid,
  .acquisition-grid { grid-template-columns: 1fr !important; }
  .acquisition-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .acquisition-entity-card {
    padding: 16px !important;
  }
  .acquisition-map-container {
    height: 250px !important;
  }
  .acquisition-filters {
    flex-direction: column !important;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   JOBS MODULE — DEEP MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .jobs-stats-grid,
  .jobs-grid { grid-template-columns: 1fr !important; }
  .jobs-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .job-listing-card {
    padding: 16px !important;
  }
  .job-detail-split {
    flex-direction: column !important;
    gap: 16px;
  }
  .job-detail-split > * { width: 100% !important; }
  .job-filters {
    flex-direction: column !important;
    gap: 8px;
  }
  .job-tags { flex-wrap: wrap !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOD PRO / HOTEL / HEALTHCARE / CARE — DEEP MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .food-menu-grid,
  .food-orders-grid,
  .fp-grid { grid-template-columns: 1fr !important; }
  .food-order-card { padding: 16px !important; }
  .hotel-rooms-grid,
  .hotel-bookings-grid { grid-template-columns: 1fr !important; }
  .hotel-room-card {
    flex-direction: column !important;
  }
  .hotel-room-image {
    width: 100% !important;
    max-height: 200px;
    object-fit: cover;
    border-radius: 12px 12px 0 0 !important;
  }
  .healthcare-patients-grid,
  .healthcare-appointments-grid { grid-template-columns: 1fr !important; }
  .patient-card {
    flex-direction: column !important;
    text-align: center;
  }
  .care-clients-grid,
  .care-schedule-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   VEHICLE TRACKER / LOGISTICS — DEEP MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .vt-stats-grid,
  .vt-grid { grid-template-columns: 1fr !important; }
  .vt-map-container { height: 300px !important; min-height: 250px; }
  .vt-vehicle-list {
    max-height: 40vh;
    overflow-y: auto;
  }
  .vt-split-view {
    flex-direction: column !important;
    gap: 16px;
  }
  .vt-split-view > * { width: 100% !important; }
  .logistics-stats-grid { grid-template-columns: 1fr !important; }
  .logistics-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .logistics-shipment-card { padding: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED TOUCH & INTERACTION PATTERNS
   ═══════════════════════════════════════════════════════════════ */

/* Smooth momentum scrolling for all scroll containers */
@media (max-width: 900px) {
  [style*="overflow"],
  .scroll-container,
  .table-responsive,
  .tab-list,
  .nav-tabs {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Larger tap targets for action icons */
  .action-icon,
  .icon-btn,
  [class*="btn-icon"],
  .table-actions button,
  .table-actions a {
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px !important;
  }

  /* Prevent double-tap zoom on interactive elements */
  button, a, input, select, textarea, [role="button"] {
    touch-action: manipulation;
  }

  /* Disable hover effects on touch devices (reduce stickiness) */
  @media (hover: none) {
    .nav-link:hover,
    .btn:hover,
    .card:hover,
    [class*="card"]:hover {
      transform: none !important;
      box-shadow: inherit !important;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED NOTIFICATION / TOAST POSITIONING — MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .toast,
  .notification,
  .alert-toast,
  [class*="toast"],
  [class*="notification-popup"],
  .snackbar {
    position: fixed !important;
    bottom: 16px !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    width: auto !important;
    max-width: 100% !important;
    z-index: 11000;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
  }
  .toast-container,
  .notification-container {
    position: fixed !important;
    bottom: 16px !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    width: auto !important;
    z-index: 11000;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED MODAL / BOTTOM SHEET PATTERN — MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .modal-content,
  .modal-dialog,
  .modal-container {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 40vh;
    max-height: 90vh;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    animation: slideUp 0.3s ease;
  }
  .modal-header {
    border-radius: 16px 16px 0 0 !important;
    padding: 16px !important;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  /* Drag indicator for bottom sheet */
  .modal-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(128,128,128,0.4);
    border-radius: 2px;
    margin: 0 auto 12px;
  }
  .modal-body {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
  }
  .modal-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    position: sticky;
    bottom: 0;
    z-index: 1;
  }
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED BREADCRUMB / TOOLBAR — MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .breadcrumb,
  .breadcrumbs,
  [class*="breadcrumb"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 8px 0 !important;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .breadcrumb li,
  .breadcrumbs li {
    flex-shrink: 0;
    font-size: 0.8rem !important;
  }
  /* Toolbar / action bar compact */
  .toolbar,
  .action-bar,
  .filter-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  .toolbar > *,
  .action-bar > *,
  .filter-bar > * {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED DATA TABLE — MOBILE COLUMN PRIORITY
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Priority-based column hiding on small screens */
  table .priority-low,
  table [data-priority="low"],
  table .col-optional { display: none !important; }
}
@media (max-width: 480px) {
  table .priority-medium,
  table [data-priority="medium"],
  table .col-secondary { display: none !important; }
  /* Compact table rows */
  table th,
  table td {
    padding: 8px !important;
    font-size: 0.78rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TIMELINE / ACTIVITY FEED — MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .timeline,
  .activity-feed,
  [class*="timeline"] {
    padding-left: 24px !important;
  }
  .timeline-item,
  .activity-item {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  .timeline::before {
    left: 12px !important;
  }
  .timeline-marker,
  .timeline-dot {
    left: -18px !important;
    width: 12px !important;
    height: 12px !important;
  }
  .timeline-content {
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CHART CONTAINERS — RESPONSIVE HEIGHT
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .chart-container,
  .chart-wrapper,
  [class*="chart-container"] {
    height: 260px !important;
    min-height: 200px;
    width: 100% !important;
  }
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 480px) {
  .chart-container,
  .chart-wrapper,
  [class*="chart-container"] {
    height: 220px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN / SELECT — MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dropdown-menu,
  .dropdown-content,
  [class*="dropdown-menu"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px 16px 0 0 !important;
    z-index: 10500;
    animation: slideUp 0.25s ease;
  }
  .dropdown-item,
  .dropdown-menu a,
  .dropdown-menu li {
    padding: 14px 20px !important;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE PHONE — SPECIFIC OPTIMISATIONS
   ═══════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .sidebar,
  [class*="-sidebar"]:not(.sb-sidebar) {
    height: 100vh !important;
    overflow-y: auto;
  }
  .modal-content,
  .modal-dialog {
    max-height: 90vh !important;
  }
  .modal-body {
    max-height: 60vh;
  }
  .hero,
  .hero-section,
  [class*="hero"] {
    min-height: auto !important;
    padding: 24px 16px !important;
  }
  .hero h1,
  .hero-section h1 {
    font-size: 1.4rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE MOBILE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (prefers-color-scheme: dark) {
  .sidebar-overlay,
  .navbar-overlay {
    background: rgba(0,0,0,0.6) !important;
  }
  .mobile-sidebar-toggle {
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED PRINT: all modules
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .accounting-sidebar, .agro-sidebar, .mkt-sidebar,
  .bk-sidebar, .pp-sidebar, .pay-sidebar, .tt-sidebar,
  .mobile-sidebar-toggle, .sidebar-overlay,
  .navbar-overlay, .mobile-menu-toggle,
  .toast, .notification, [class*="toast"],
  .modal-backdrop, .dropdown-menu,
  .mobile-menu-btn, .agro-sidebar-toggle,
  button.btn-primary, .fab-button,
  nav, footer { display: none !important; }

  .acct-main, .agro-main, .mkt-main,
  .bk-main, .pp-main-content, .pay-main,
  .tt-main, .module-main,
  .main-content, .content-area {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  table { min-width: 0 !important; }
  table th, table td {
    white-space: normal !important;
    font-size: 10pt !important;
    padding: 4px 6px !important;
  }
  .card { break-inside: avoid; }
  .chart-container, canvas { max-height: 200px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV FIX — Marketplace & ERP pages
   Hide nav-actions-group on mobile; show only logo + hamburger.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Force nav-actions-group off-screen on mobile */
  .nav-actions-group {
    position: fixed !important;
    left: -300px !important;
    bottom: 0 !important;
    top: auto !important;
    width: 280px !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 99999;
  }
  /* Reveal when mobile drawer is open */
  .nav-menu.active ~ .nav-actions-group,
  .nav-menu.mobile-open ~ .nav-actions-group {
    left: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* ERP sidebar: hide toggle & logo items on mobile (redundant with top nav hamburger) */
  .sidebar-toggle-item,
  .erp-sidebar-toggle {
    display: none !important;
  }

  /* Nav container: keep logo and hamburger on single row */
  .nav-container {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Hamburger always visible */
  .mobile-menu-btn {
    display: flex !important;
    order: 10;
    flex-shrink: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ERP HOME — Login, Language, Charts, Grid, Hamburgers
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── 1. Show util-bar (login + language) on mobile ── */
  #util-bar {
    display: block !important;
    /* No position/z-index override — util-bar sits in normal flow ABOVE
       the nav-container. Removing z-index prevents overlap with the dark
       main nav row. The parent .navbar already handles page-level stacking. */
    padding: 0;
    background: #fff;
  }
  .util-bar-inner {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 12px;
    height: 36px;
    overflow: hidden;
  }
  .nav-auth-buttons {
    display: flex !important;
    align-items: center;
    gap: 6px;
  }
  /* Keep util-bar buttons compact so they fit inside the 36px strip */
  .util-bar-inner .util-btn {
    font-size: 0.72rem !important;
    padding: 3px 10px !important;
    height: auto !important;
    line-height: 1.4 !important;
  }
  .util-lang-wrap {
    flex-shrink: 0;
  }
  .util-bar-inner .util-lang-btn {
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
    height: auto !important;
    line-height: 1.4 !important;
  }
  #navUserProfile {
    gap: 6px !important;
  }

  /* ── 2. Align hamburgers & app-switcher on one horizontal row ── */
  .nav-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
  }
  .logo.enhanced-logo {
    flex: 1;
    min-width: 0;
  }
  .erp-app-switcher {
    order: 8;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .mobile-menu-btn {
    order: 9 !important;
    flex-shrink: 0;
    width: 40px !important;
    height: 40px !important;
  }

  /* ── 3. Featured cards → 2-column grid on tablet, 1-column on phone ── */
  .erp-featured-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  /* ── 4. Disable ALL mini-dashboard animations on mobile ── */
  .ana-bar,
  .ana-spark-path,
  .ana-spark-dot,
  .wb-col-blk,
  .wb-cursor,
  .wb-hero-blk::after,
  .acq-stage,
  .acq-node,
  .jobs-pill,
  .jobs-chip .val,
  .erp-fcard,
  .erp-fcard::before,
  .erp-fcard-icon {
    animation: none !important;
  }

  /* Set fixed heights for bars (no animation) */
  .ana-bar:nth-child(1) { height: 28px !important; }
  .ana-bar:nth-child(2) { height: 38px !important; }
  .ana-bar:nth-child(3) { height: 18px !important; }
  .ana-bar:nth-child(4) { height: 34px !important; }
  .ana-bar:nth-child(5) { height: 46px !important; }
  .ana-bar:nth-child(6) { height: 24px !important; }

  /* Static sparkline */
  .ana-spark-path {
    stroke-dashoffset: 0 !important;
    stroke-dasharray: none !important;
  }
  .ana-spark-dot { r: 2.5 !important; }

  /* Static funnel stages */
  .acq-stage {
    opacity: 1 !important;
    transform: none !important;
  }
  .acq-node {
    box-shadow: 0 0 0 2px rgba(14,165,233,0.3) !important;
  }

  /* Static website builder blocks */
  .wb-col-blk:nth-child(1) { width: 55% !important; }
  .wb-col-blk:nth-child(2) { width: 70% !important; }
  .wb-col-blk:nth-child(3) { width: 40% !important; }
  .wb-cursor { opacity: 1 !important; }

  /* Static job pills */
  .jobs-pill { transform: none !important; }
  .jobs-chip .val { transform: none !important; }

  /* ── 5. Featured card sizing for mobile ── */
  .erp-fcard {
    padding: 18px 16px 14px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }
  .erp-fcard-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
  }
  .erp-fcard-title {
    font-size: 13px !important;
  }
  .erp-fcard-desc {
    font-size: 10px !important;
  }
  .fcard-mini-dash {
    padding: 8px 8px 6px !important;
  }
  .ana-bars {
    height: 40px !important;
  }

  /* ── 6. Module grid: 2 columns on mobile ── */
  .unit-gateway-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ── 7. Sidebar: fully hidden on mobile until toggled ── */
  .sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important;
    width: 260px !important;
    height: 100vh !important;
    z-index: 99999 !important;
    transform: none !important;
    transition: left 0.3s ease !important;
  }
  .sidebar.mobile-open,
  html.erp-sidebar-visible .sidebar {
    left: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  /* Prevent sidebar from pushing content on mobile */
  html.erp-sidebar-visible .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ── Extra-small phones (≤480px) ── */
@media (max-width: 480px) {
  .erp-featured-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .unit-gateway-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ERP SHELL (erp_home.html) — MOBILE-SPECIFIC OVERRIDES
   Controls the outer module-navigation sidebar and top navbar
   when viewed on phones/tablets (≤900px).
   ═══════════════════════════════════════════════════════════════ */

/* -- erp_home navbar: hide full nav-menu, show hamburger ───────── */
@media (max-width: 900px) {
  /* erp_home.html top nav: The .nav-menu is always-hidden by default
     (mobile-responsive.css already handles .nav-menu), but erp_home
     has an id="navMenu" that follows the same pattern.               */
  #navMenu {
    display: none !important;
  }
  #navMenu.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 85vw;
    max-width: 340px;
    height: 100vh;
    background: rgba(10, 15, 30, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 72px 16px 24px;
    z-index: 10000;
    overflow-y: auto;
    box-shadow: 4px 0 32px rgba(0,0,0,0.5);
    gap: 2px;
  }
  #navMenu.mobile-open li {
    list-style: none;
    width: 100%;
  }
  #navMenu.mobile-open .nav-link,
  #navMenu.mobile-open a {
    padding: 12px 14px !important;
    width: 100%;
    display: block;
    border-radius: 10px;
    font-size: 0.95rem;
  }
  #navMenu.mobile-open .dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 10px !important;
    margin-top: 4px;
    padding: 6px !important;
    max-height: 55vh;
    overflow-y: auto;
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    transform: none !important;
    left: auto !important;
    display: block !important;
  }
  #navMenu.mobile-open .dropdown-menu li > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 7px 10px !important;
    border-radius: 8px;
    font-size: 0.85rem !important;
  }

  /* ERP outer module sidebar — fix as overlay on mobile:
     When the app-switcher is tapped, erp_home.html adds 'mobile-open'
     to <aside class="sidebar">. On mobile, the sidebar should float
     above content rather than push it.                               */
  .erp-container > .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 9999 !important;
    width: 280px !important;
    min-width: 280px !important;
    transform: translateX(-100%) !important;
    opacity: 0 !important;
    visibility: hidden;
    transition: transform 0.28s ease, opacity 0.28s ease, visibility 0s 0.28s !important;
    box-shadow: none !important;
    overflow-y: auto !important;
  }
  .erp-container > .sidebar.mobile-open {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 6px 0 32px rgba(0,0,0,0.45) !important;
    transition: transform 0.28s ease, opacity 0.28s ease, visibility 0s 0s !important;
  }
  /* Sidebar text/labels always visible when mobile-open */
  .erp-container > .sidebar.mobile-open .nav-text,
  .erp-container > .sidebar.mobile-open .nav-label,
  .erp-container > .sidebar.mobile-open .sidebar-label,
  .erp-container > .sidebar.mobile-open .logo-text,
  .erp-container > .sidebar.mobile-open .sidebar-header,
  .erp-container > .sidebar.mobile-open .sidebar-profile-info {
    opacity: 1 !important;
    width: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    display: initial !important;
    height: auto !important;
  }
  .erp-container > .sidebar.mobile-open .sidebar-nav .nav-link {
    justify-content: flex-start !important;
    padding: 12px 16px !important;
  }
  .erp-container > .sidebar.mobile-open .sidebar-nav .nav-link i {
    margin-right: 10px !important;
  }

  /* When erp-shell-expanded and on mobile: main-content stays full-width */
  html.erp-shell-expanded .main-content,
  html.erp-sidebar-visible .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Nav container: don't hide the app-switcher on mobile */
  .erp-app-switcher {
    order: -1;
  }

  /* Nav container horizontal spacing on mobile */
  .nav-container {
    flex-wrap: nowrap;
    padding: 0 12px !important;
    gap: 8px;
  }
  .nav-container .logo {
    flex: 1 1 auto;
    min-width: 0;
  }
  .nav-actions-group {
    flex-shrink: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE FIXES v4.1
   Targets inline-styled elements that overflow on mobile
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Global: any inline-styled element with large min-width ── */
@media (max-width: 768px) {
  /* Tables with inline min-width: make scrollable */
  table[style*="min-width"],
  div[style*="min-width"] > table,
  .table-responsive table,
  [class*="table-wrap"] table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Any div/section with inline min-width > viewport: cap it */
  div[style*="min-width:5"],
  div[style*="min-width:6"],
  div[style*="min-width:7"],
  div[style*="min-width:8"],
  div[style*="min-width:9"],
  div[style*="min-width:1"] {
    min-width: unset !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* Fixed-width inputs/selects: go full-width */
  input[style*="width:1"],
  input[style*="width:2"],
  input[style*="width:3"],
  select[style*="width:1"],
  select[style*="width:2"],
  select[style*="width:3"],
  input[style*="width: 1"],
  input[style*="width: 2"],
  input[style*="width: 3"],
  select[style*="width: 1"],
  select[style*="width: 2"],
  select[style*="width: 3"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Flex containers with justify-content:space-between: allow wrapping */
  [style*="justify-content:space-between"],
  [style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ── 2. Accounting module: inline table/container overflows ───── */
@media (max-width: 768px) {
  /* Accounting tables with inline min-widths (520–820px) */
  #journalTable, #ledgerTable, #trialBalanceTable,
  #invoiceTable, #billsTable, #bankRecTable,
  #budgetTable, #taxTable, #fixedAssetsTable,
  #auditLogTable, #cashFlowTable, #currencyTable,
  [id*="Table"][style*="min-width"],
  .acct-table-wrap, .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .acct-table-wrap table,
  .table-wrap table {
    min-width: 480px;
  }

  /* AI insights panel: fixed 340px width */
  [style*="width:340px"],
  [style*="width: 340px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Accounting filter toolbars: stack vertically */
  .filter-bar, .toolbar,
  [class*="filter-row"],
  [class*="toolbar-row"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .filter-bar input,
  .filter-bar select,
  .toolbar input,
  .toolbar select {
    width: 100% !important;
    min-width: unset !important;
  }
}

/* ── 3. CRM module: pipeline & detail panel ──────────────────── */
@media (max-width: 768px) {
  /* Pipeline columns: horizontal scroll */
  .pipeline-container, .pipeline-board,
  [class*="pipeline"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  /* CRM inline min-width containers */
  .crm-detail, .lead-detail,
  [class*="crm"][style*="min-width"] {
    min-width: unset !important;
    width: 100% !important;
  }
  /* CRM fixed-width inputs */
  .crm-filters input,
  .crm-filters select,
  [class*="crm"] input[style*="width"],
  [class*="crm"] select[style*="width"] {
    width: 100% !important;
  }
}

/* ── 4. School module: timetable/exam/fee tables ─────────────── */
@media (max-width: 768px) {
  .timetable-grid, .exam-table-wrap,
  .report-card-wrap, .fees-table-wrap,
  .parents-table-wrap,
  [class*="school"] .table-wrap,
  #timetableGrid, #examTable, #reportCard,
  #feesTable, #parentsTable {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .timetable-grid table,
  .exam-table-wrap table,
  .fees-table-wrap table,
  .parents-table-wrap table {
    min-width: 480px;
  }
}

/* ── 5. NGO module: donor/project tables ─────────────────────── */
@media (max-width: 768px) {
  [class*="ngo"] .table-wrap,
  .ngo-table-wrap,
  #donorTable, #projectTable, #grantTable {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 6. Payroll module: mega-dropdown + tables ───────────────── */
@media (max-width: 768px) {
  .payroll-table-wrap,
  [class*="payroll"] .table-wrap,
  #payslipTable, #payRunTable {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Payroll search box: full-width */
  [class*="payroll"] input[style*="width:280"],
  [class*="payroll"] input[style*="width: 280"] {
    width: 100% !important;
  }
}

/* ── 7. POS module: product grid + cart ──────────────────────── */
@media (max-width: 768px) {
  .pos-layout, .pos-container {
    flex-direction: column !important;
  }
  .pos-products, .pos-cart {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }
}

/* ── 8. Jobs module: dropdown overflow ───────────────────────── */
@media (max-width: 768px) {
  .jobs-filter-dropdown,
  [class*="jobs"] .dropdown-menu[style*="min-width"] {
    min-width: unset !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── 9. Products page: dropdown overflow ─────────────────────── */
@media (max-width: 768px) {
  [class*="products"] .dropdown-menu[style*="min-width"],
  .product-filter-dropdown {
    min-width: unset !important;
    width: 100% !important;
  }
}

/* ── 10. Global: modal width safety ──────────────────────────── */
@media (max-width: 600px) {
  .modal-content, .modal-dialog,
  [class*="modal"][style*="max-width"],
  [style*="max-width:700px"],
  [style*="max-width: 700px"] {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 1rem auto !important;
  }
}

/* ── 11. Global: prevent horizontal overflow ─────────────────── */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  .main-content, .content-area, .portal-content,
  [class*="content-scroll"] {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* ── 12. Global: inline grid containers — responsive fallback ── */
@media (max-width: 600px) {
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}
@media (max-width: 400px) {
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* ── 13. Touch targets: global minimum ───────────────────────── */
@media (hover: none) and (pointer: coarse) {
  button, a.btn, [role="button"],
  .btn, .action-btn, input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Prevent double-tap zoom on interactive elements */
  button, a, input, select, textarea {
    touch-action: manipulation;
  }
}

/* ── 14. Landscape phone fixes ───────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .login-page {
    align-items: flex-start !important;
    padding-top: 1rem;
  }
  .login-container {
    padding: 0.5rem !important;
  }
  .login-logo {
    margin-bottom: 1rem !important;
  }
  .login-card {
    padding: 1rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v17 ADDITIONS — April 2026
   ═══════════════════════════════════════════════════════════════ */

/* ── 15. CarePro: override min-width:900px that forces scroll ── */
@media (max-width: 900px) {
  [style*="min-width:900px"],
  [style*="min-width: 900px"] {
    min-width: unset !important;
    width: 100% !important;
  }
}

/* ── 16. Portal sidebar (admin/partner): collapse on mobile ──── */
@media (max-width: 900px) {
  .portal-sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0;
    width: min(280px, 85vw) !important;
    height: 100vh !important;
    z-index: 9999;
    transition: left 0.3s ease;
  }
  .portal-sidebar.mobile-open,
  .portal-sidebar.open {
    left: 0 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3) !important;
  }
  .portal-main, .portal-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 16px !important;
  }
}

/* ── 17. Marketplace sidebar: collapse on mobile ─────────────── */
@media (max-width: 900px) {
  .marketplace .sidebar,
  .app-layout > .sidebar,
  aside.sidebar:not([class*="-sidebar"]) {
    position: fixed !important;
    left: -280px !important;
    top: 0;
    width: 260px !important;
    height: 100vh !important;
    z-index: 9999;
    transition: left 0.3s ease;
  }
  .marketplace .sidebar.mobile-open,
  .app-layout > .sidebar.mobile-open {
    left: 0 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3) !important;
  }
  .app-layout > .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ── 18. Index.html: erp-subnav pills scroll on tablet ───────── */
@media (max-width: 768px) {
  .erp-subnav {
    gap: 6px !important;
    padding: 8px 12px !important;
  }
  .erp-subnav a {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
    min-width: auto !important;
    width: auto !important;
  }
}

/* ── 19. Index.html: platform mega-menu (hidden, but safe) ───── */
@media (max-width: 900px) {
  .platform-mega-menu,
  #platformMegaMenu {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    border-radius: 0 !important;
    transform: none !important;
    left: auto !important;
  }
  .platform-mega-menu .mega-menu-section {
    margin-bottom: 8px;
  }
}

/* ── 20. Login pages: ensure card fits phone width ───────────── */
@media (max-width: 480px) {
  .login-card, .login-container {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 20px !important;
    border-radius: 12px !important;
  }
  .login-page {
    padding: 16px !important;
  }
}

/* ── 20b. Auth modal (erp-auth.js) — fit phone viewport ──────────────── */
@media (max-width: 600px) {
  #authModal > div {
    max-width: 95vw !important;
    width: 95vw !important;
    padding: 1.25rem !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  #authModal h2 { font-size: 1.25rem !important; }
  #authModal input { font-size: 16px !important; /* prevent iOS zoom */ }
  #authSignupForm > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 21. nav-actions-group: compact on mobile ────────────────── */
@media (max-width: 900px) {
  .nav-actions-group {
    gap: 6px !important;
  }
  .nav-actions-group .btn,
  .nav-actions-group a {
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
  }
}

/* ── 22. Util-bar / top-bar: stack on mobile ─────────────────── */
@media (max-width: 768px) {
  .util-bar, .top-bar {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  .util-bar > *, .top-bar > * {
    width: 100% !important;
    justify-content: center !important;
  }
}
@media (max-width: 600px) {
  .util-bar, .top-bar {
    display: none !important;
  }
}

/* ── 23. Inline flex containers: force stack below 768px ─────── */
@media (max-width: 768px) {
  [style*="display:flex"][style*="gap"] > [style*="flex:1"],
  [style*="display: flex"][style*="gap"] > [style*="flex: 1"] {
    flex: 1 1 100% !important;
    min-width: unset !important;
  }
}

/* ── 24. Sticky / fixed headers: reduce height on mobile ─────── */
@media (max-width: 600px) {
  nav.navbar, nav[class*="nav"] {
    padding: 8px 12px !important;
  }
  .logo, .enhanced-logo {
    font-size: 1.2rem !important;
  }
  .logo svg, .enhanced-logo svg {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════

/* ===============================================================
   v18 ADDITIONS - April 2026 (Mobile polish sweep)
   - Safe-area insets (iOS notch / Android gesture bar)
   - Minimum 44x44 tap targets (WCAG 2.5.5 AAA)
   - iOS 16px form font size (prevents focus-zoom)
   - Prefers-reduced-motion support
   - Horizontal-scroll trap prevention on body
   - Tap-highlight polish
   =============================================================== */

/* -- 25. Global horizontal-scroll guard ----------------------- */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
body {
  -webkit-tap-highlight-color: rgba(0,0,0,0.05);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -- 26. Safe-area padding for sticky chrome ------------------ */
@supports (padding: max(0px)) {
  .navbar,
  nav.navbar,
  header.site-header,
  .site-header,
  .topbar,
  .top-bar {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
  .bottom-nav,
  .mobile-bottom-nav,
  .fab-container,
  .sticky-footer,
  footer.sticky,
  .floating-cta {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  .sidebar,
  .portal-sidebar {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* -- 27. iOS: prevent input-focus zoom (needs >= 16px) -------- */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* -- 28. Minimum tap-target sizing ---------------------------- */
@media (max-width: 768px) {
  button,
  .btn,
  [role="button"],
  a.nav-link,
  a.sidebar-link,
  .menu-item,
  .dropdown-item,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px;
  }
  .icon-btn,
  .btn-icon,
  button.icon-only {
    min-width: 44px;
    min-height: 44px;
  }
  td .icon-btn,
  td .btn-icon {
    min-width: 36px;
    min-height: 36px;
  }
}

/* -- 29. Data tables: wrap in horizontal scroll on small ------ */
@media (max-width: 768px) {
  .table-responsive,
  .table-wrap,
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table:not(.no-mobile-scroll) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table:not(.no-mobile-scroll) thead,
  table:not(.no-mobile-scroll) tbody,
  table:not(.no-mobile-scroll) tr {
    min-width: max-content;
  }
}

/* -- 30. Modals: full-screen on narrow phones ----------------- */
@media (max-width: 480px) {
  .modal-content,
  .modal-dialog > .modal-content,
  .modal-panel,
  .dialog-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .modal,
  .dialog-backdrop {
    padding: 0 !important;
  }
}

/* -- 31. Reduced motion / accessibility ----------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -- 33. WhatsApp floating FAB: avoid bottom-nav overlap ------ */
@media (max-width: 768px) {
  .wb-wa-fab,
  .whatsapp-fab,
  .floating-whatsapp {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  }
  body.has-bottom-nav .wb-wa-fab,
  body.has-bottom-nav .whatsapp-fab {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* -- 34. Form field spacing on small screens ------------------ */
@media (max-width: 480px) {
  .form-group, .form-row, .field {
    margin-bottom: 14px !important;
  }
  label { display: block; margin-bottom: 4px; }
  .form-actions,
  .btn-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .form-actions > *,
  .btn-group > * {
    width: 100%;
  }
}

/* -- 35. Cards: consistent small-screen padding --------------- */
@media (max-width: 600px) {
  .card, .panel, .tile, .widget {
    padding: 16px !important;
    border-radius: 12px !important;
  }
  .card-header, .panel-header {
    padding: 12px 0 !important;
  }
}

/* -- 36. Images / media: lazy-load friendly defaults ---------- */
img[loading="lazy"] {
  background: #f3f4f6;
}

/* -- 37. Print: hide nav chrome ------------------------------- */
@media print {
  .sidebar, .navbar, .top-bar, .bottom-nav, .fab-container,
  .wb-wa-fab, .whatsapp-fab, nav.navbar {
    display: none !important;
  }
  .main-content, main {
    padding: 0 !important;
  }
}


/* =====================================================================
 * v19 (2026-04-21) — Universal mobile polish for Bookkeeping + tables
 * =====================================================================
 * Guarantees 44px tactile targets, horizontally scrollable tables,
 * and single-column forms on narrow viewports across every app page.
 * ===================================================================== */
@media (max-width: 768px) {
  /* Universal scrollable tables */
  .table-responsive,
  .portal-table-wrap,
  .bk-table-wrap,
  .content-section table:not(.no-mobile-scroll) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .content-section table:not(.no-mobile-scroll) {
    display: block;
    min-width: 100%;
  }
  /* Tap targets */
  .btn, .bk-btn, button:not(.btn-close):not(.close):not([aria-label="Close"]),
  .nav-link, .dropdown-item, .form-control, .form-select, input[type="text"],
  input[type="email"], input[type="password"], input[type="number"],
  input[type="date"], input[type="tel"], select, textarea {
    min-height: 40px;
  }
  /* Stat grids collapse gracefully */
  .stats-grid, .bk-stats-grid, .dashboard-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  .stats-grid, .bk-stats-grid, .dashboard-stats {
    grid-template-columns: 1fr !important;
  }
  /* Page headers collapse */
  .page-header h1 { font-size: 1.25rem !important; }
  .page-header p  { font-size: .85rem !important; }
  /* Modals full-width */
  .modal-dialog { margin: .5rem !important; }
}

/* =====================================================================
 * v20 (2026-04-21) — Universal sidebar design consistency
 * =====================================================================
 * Applies subtle, safe polish to ANY sidebar that uses one of the three
 * common patterns in the codebase: .sidebar-nav, .accounting-sidebar,
 * .wf-sidebar, .portal-sidebar. Rules are defensive (low specificity)
 * so per-module CSS can still override them.
 * ===================================================================== */

/* Unified scrollbar across all sidebars */
.sidebar, .portal-sidebar, .accounting-sidebar, .wf-sidebar,
.sidebar-nav, .wf-sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.45) transparent;
}
.sidebar::-webkit-scrollbar,
.portal-sidebar::-webkit-scrollbar,
.accounting-sidebar::-webkit-scrollbar,
.wf-sidebar::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.wf-sidebar-nav::-webkit-scrollbar { width: 6px; height: 6px; }
.sidebar::-webkit-scrollbar-thumb,
.portal-sidebar::-webkit-scrollbar-thumb,
.accounting-sidebar::-webkit-scrollbar-thumb,
.wf-sidebar::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.wf-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.45);
  border-radius: 999px;
}
.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.7); }

/* Unified nav-link/nav-item hover & focus states */
.sidebar-nav .nav-link,
.sidebar-nav a,
.accounting-sidebar .nav-item-header,
.accounting-sidebar .submenu a,
.portal-sidebar .nav-item,
.wf-sidebar .wf-sidebar-nav a,
.wf-sidebar .wf-sidebar-nav .wf-nav-link {
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.sidebar-nav .nav-link:focus-visible,
.accounting-sidebar .nav-item-header:focus-visible,
.portal-sidebar .nav-item:focus-visible,
.wf-sidebar .wf-sidebar-nav a:focus-visible {
  outline: 2px solid rgba(99,102,241,.6);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Chevron rotation for collapsible submenu headers */
.nav-item-header .chevron,
.nav-item-header i.fa-chevron-down {
  transition: transform .18s ease;
}
.nav-item-header.open .chevron,
.nav-item-header[aria-expanded="true"] .chevron,
.nav-item-header.open i.fa-chevron-down,
.nav-item-header[aria-expanded="true"] i.fa-chevron-down {
  transform: rotate(180deg);
}

/* Ensure submenu links are tactile */
.sidebar-nav .submenu a,
.accounting-sidebar .submenu a {
  display: block;
  min-height: 36px;
  padding: 8px 14px 8px 30px;
  line-height: 1.35;
}

/* Active nav link consistent accent across modules */
.sidebar-nav .nav-link.active,
.accounting-sidebar .submenu a.active,
.accounting-sidebar .nav-item-header.active,
.portal-sidebar .nav-item.active,
.wf-sidebar .wf-sidebar-nav a.active {
  position: relative;
}
.sidebar-nav .nav-link.active::before,
.accounting-sidebar .submenu a.active::before,
.portal-sidebar .nav-item.active::before,
.wf-sidebar .wf-sidebar-nav a.active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #6366f1, #0ea5e9);
}

/* Ensure all sidebar icons align consistently */
.sidebar-nav .nav-link > i,
.accounting-sidebar .nav-item-header i.menu-icon,
.portal-sidebar .nav-item > i,
.wf-sidebar .wf-sidebar-nav a > i {
  width: 20px;
  text-align: center;
  font-size: .95rem;
  flex-shrink: 0;
}

/* Mobile sidebar tap targets */
@media (max-width: 768px) {
  .sidebar-nav .nav-link,
  .sidebar-nav a,
  .accounting-sidebar .nav-item-header,
  .accounting-sidebar .submenu a,
  .portal-sidebar .nav-item,
  .wf-sidebar .wf-sidebar-nav a {
    min-height: 44px;
  }
}

/* =====================================================================
 * v21 (2026-04-22) — Pink hover highlight on all left sidebars
 * =====================================================================
 * Klipboard-style pink bar across the full width of the nav item on hover
 * (and for the active item), with white text/icon for strong contrast.
 * Applies to every sidebar pattern used across the project.
 * ===================================================================== */

:root {
  --erp-sidebar-pink: #ec4899;         /* Tailwind pink-500 */
  --erp-sidebar-pink-strong: #db2777;  /* Tailwind pink-600 */
  --erp-sidebar-pink-soft: rgba(236, 72, 153, 0.12);
}

/* Hover state — solid pink bar with white text */
.sidebar-nav .nav-link:hover,
.sidebar-nav a:hover,
.sidebar .nav-item > a:hover,
.accounting-sidebar .nav-item-header:hover,
.accounting-sidebar .submenu a:hover,
.portal-sidebar .nav-item:hover,
.wf-sidebar .wf-sidebar-nav a:hover,
.wf-sidebar .wf-sidebar-nav .wf-nav-link:hover {
  background: linear-gradient(90deg, var(--erp-sidebar-pink) 0%, var(--erp-sidebar-pink-strong) 100%) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 #ffffff, 0 2px 8px rgba(236, 72, 153, 0.25);
}

/* Ensure nested text, labels and icons flip to white on hover */
.sidebar-nav .nav-link:hover *,
.sidebar-nav a:hover *,
.sidebar .nav-item > a:hover *,
.accounting-sidebar .nav-item-header:hover *,
.accounting-sidebar .submenu a:hover *,
.portal-sidebar .nav-item:hover *,
.wf-sidebar .wf-sidebar-nav a:hover * {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Active items also get the pink treatment for consistency */
.sidebar-nav .nav-link.active,
.sidebar .nav-item > a.active,
.accounting-sidebar .submenu a.active,
.accounting-sidebar .nav-item-header.active,
.portal-sidebar .nav-item.active,
.wf-sidebar .wf-sidebar-nav a.active {
  background: linear-gradient(90deg, var(--erp-sidebar-pink) 0%, var(--erp-sidebar-pink-strong) 100%) !important;
  color: #ffffff !important;
}
.sidebar-nav .nav-link.active *,
.sidebar .nav-item > a.active *,
.accounting-sidebar .submenu a.active *,
.accounting-sidebar .nav-item-header.active *,
.portal-sidebar .nav-item.active *,
.wf-sidebar .wf-sidebar-nav a.active * {
  color: #ffffff !important;
}

/* Replace the previous indigo→sky active accent bar with a white one so
 * it reads correctly on the new pink background. */
.sidebar-nav .nav-link.active::before,
.accounting-sidebar .submenu a.active::before,
.portal-sidebar .nav-item.active::before,
.wf-sidebar .wf-sidebar-nav a.active::before {
  background: #ffffff !important;
}

/* Submenu links: soft pink tint on hover so the nested level stays readable */
.sidebar-nav .submenu a:hover,
.accounting-sidebar .submenu a:hover {
  background: var(--erp-sidebar-pink-soft) !important;
  color: var(--erp-sidebar-pink-strong) !important;
}
.sidebar-nav .submenu a:hover *,
.accounting-sidebar .submenu a:hover * {
  color: var(--erp-sidebar-pink-strong) !important;
}

/* Active submenu link: keep the bold pink bar */
.sidebar-nav .submenu a.active,
.accounting-sidebar .submenu a.active {
  background: linear-gradient(90deg, var(--erp-sidebar-pink) 0%, var(--erp-sidebar-pink-strong) 100%) !important;
  color: #ffffff !important;
}