/* ═══════════════════════════════════════════════════════════════════
   PREMIUM MOBILE UI (High-End Native Feel)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* ── 1. GLOBAL LAYOUT & SCROLLING ── */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  html, body {
    background: #f4f7fb !important;
    font-size: 13px !important; /* Smaller baseline font */
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
  }

  /* Tactile native app feel on tap */
  .btn, .bill-filter-reset, .app-icon-action, [role="button"] {
    touch-action: manipulation;
    transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.12s ease !important;
  }
  .btn:active, .bill-filter-reset:active, .app-icon-action:active {
    transform: scale(0.96) !important;
  }

  .content-wrapper > .content {
    padding: 12px 12px 140px !important; /* Huge bottom padding to prevent bottom nav overlap */
  }

  /* ── 2. PREMIUM FLOATING MODALS ── */
  .modal-dialog:not(.modal-dialog-bottom-sheet) {
    margin: 16px !important; 
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 32px) !important;
  }
  
  .modal-content {
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.15) !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .modal { z-index: 1060 !important; }
  .modal-backdrop { z-index: 1050 !important; }

  .modal-header {
    padding: 16px 20px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .modal-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }

  .modal-body {
    padding: 20px !important;
    background: #f8fafc !important;
    max-height: calc(100vh - 160px) !important;
    overflow-y: auto !important;
  }

  .modal-footer {
    padding: 16px 20px !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
  }
  
  .modal-footer .btn {
    border-radius: 12px !important; 
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
  }

  /* ── 3. PREMIUM NATIVE FORMS (Clean & Compact) ── */
  /* Remove clunky nested boxing inside modals */
  .modal-body .bg-white.border.rounded-3 {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    background: transparent !important;
  }
  
  /* Hide the noisy section headers (e.g. "PERSONAL DETAILS") */
  .modal-body .text-uppercase.mb-2 {
    display: none !important;
  }

  /* Hide labels in simple generic modals to remove redundancy with placeholders. */
  .modal-body:not(.bill-action-body):not(.recovery-modal-body):not(.account-entry-body) label:not(.form-check-label), 
  .modal-body:not(.bill-action-modal):not(.recovery-modal-body):not(.account-entry-body) .form-label:not(.form-check-label) {
    display: none !important;
  }

  /* ── Essential Financial Labels for Confirm Bill & Purchase Modals & Recovery Modals ── */
  .bill-action-modal label,
  .bill-action-modal .form-label,
  #viewBillModal label,
  #viewBillModal .form-label,
  #viewPurchaseModal label,
  #viewPurchaseModal .form-label,
  #recoveryPaymentModal label,
  #recoveryPaymentModal .recovery-form-label,
  #recoveryPaymentModal .form-label,
  #recoveryHistoryModal label,
  #recoveryAssignmentModal label,
  .recovery-modal-body label,
  .recovery-form-label,
  #accountEntryModal label,
  #accountEntryModal .account-entry-label,
  #accountEntryModal .form-label,
  .account-entry-body label,
  .account-entry-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #475569 !important;
    margin-bottom: 5px !important;
  }

  /* Section Header Banners (e.g. "ADJUSTMENTS", "RECEIVE PAYMENT") */
  .bill-action-modal .text-uppercase.mb-2,
  #viewBillModal .text-uppercase.mb-2,
  #viewPurchaseModal .text-uppercase.mb-2 {
    display: block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #1e293b !important;
  }

  /* Card Sections grouping */
  .bill-action-modal .bg-white.border.rounded-3,
  #viewBillModal .bg-white.border.rounded-3,
  #viewPurchaseModal .bg-white.border.rounded-3 {
    display: block !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    padding: 14px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  }

  /* Compact Input Heights for Financial Calculation Forms */
  .bill-action-modal .form-control,
  .bill-action-modal .form-select,
  #viewBillModal .form-control,
  #viewBillModal .form-select,
  #viewPurchaseModal .form-control,
  #viewPurchaseModal .form-select {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  .bill-action-modal .input-group,
  #viewBillModal .input-group,
  #viewPurchaseModal .input-group {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }

  .bill-action-modal .input-group .form-control,
  .bill-action-modal .input-group .form-select,
  #viewBillModal .input-group .form-control,
  #viewBillModal .input-group .form-select,
  #viewPurchaseModal .input-group .form-control,
  #viewPurchaseModal .input-group .form-select {
    height: 40px !important;
    min-height: 40px !important;
  }

  /* Distinct visual style for calculated/readonly financial fields */
  .bill-action-modal input[readonly],
  #viewBillModal input[readonly],
  #viewPurchaseModal input[readonly] {
    background-color: #f1f5f9 !important;
    border: 1px dashed #cbd5e1 !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    cursor: default !important;
  }

  /* Premium Native Filled Inputs (16px base font prevents iOS Safari auto-zoom) */
  .form-control, .form-select, .select2-container .select2-selection {
    background-color: #f1f5f9 !important; /* Soft premium grey */
    border: 1px solid transparent !important;
    font-size: 16px !important; 
    height: 48px !important; /* Taller for touch */
    min-height: 48px !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    color: #0f172a !important;
    box-shadow: none !important;
  }
  
  .form-control:focus, .form-select:focus, .select2-container--focus .select2-selection {
    background-color: #ffffff !important;
    border: 2px solid #3b82f6 !important; /* Beautiful blue focus */
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1) !important;
  }

  /* Fix Input Groups (Merge icons and inputs cleanly) */
  .input-group {
    background: #f1f5f9 !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-wrap: nowrap !important; /* Prevent icon and input from splitting into two lines */
    align-items: center !important;
    padding: 0 4px !important;
    border: 1px solid transparent !important;
  }
  .input-group:focus-within {
    border-color: #cbd5e1 !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.1) !important;
  }
  .input-group .form-control, .input-group .input-group-text {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 48px !important;
  }
  .input-group .input-group-text {
    color: #64748b !important;
    padding-left: 12px !important;
    padding-right: 8px !important;
  }

  /* Compact Filter Toolbar Chips */
  .account-toolbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  
  /* Filter Panel (Horizontal Scroll for Lists) */
  .billing-list-filter-panel {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 4px 16px 12px 16px !important;
    margin: 0 -16px 16px -16px !important; /* bleed edges */
    scrollbar-width: none !important;
  }
  .billing-list-filter-panel::-webkit-scrollbar {
    display: none !important;
  }
  .billing-list-filter {
    flex: 0 0 auto !important;
    min-width: 140px !important;
  }
  .billing-list-filter label {
    display: none !important; /* Hide labels for a super clean pill look, or keep them if needed? Actually they are hidden generally now */
  }
  .billing-list-filter .form-control, 
  .billing-list-filter .form-select, 
  .billing-list-filter .select2-container .select2-selection {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 22px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  }
  .billing-list-filter-panel .bill-filter-reset {
    height: 44px !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    flex: 0 0 auto !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
  }
  .account-toolbar .select2-selection, 
  .account-toolbar .form-select {
    height: 38px !important;
    border-radius: 19px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
  }
  .account-toolbar .select2-selection__arrow {
    height: 38px !important;
  }

  /* Fix Select2 Height & Alignment for standard forms */
  .select2-container .select2-selection--single {
    display: flex !important;
    align-items: center !important;
  }
  .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    line-height: normal !important;
  }
  .modal-body .select2-container .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
  }

  /* Floating Action Button (FAB) for Primary Add Actions */
  #btnAddAccount, #btnCreateBill, #btnAddProduct, .mobile-fab {
    position: fixed !important;
    bottom: 84px !important; /* Lifted above the bottom navigation bar */
    right: 16px !important;
    width: 52px !important; /* Slightly smaller so it doesn't block content */
    height: 52px !important;
    border-radius: 26px !important;
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4) !important;
    z-index: 1040 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    padding: 0 !important;
  }
  #btnAddAccount i, #btnCreateBill i, #btnAddProduct i, .mobile-fab i {
    font-size: 22px !important;
    margin: 0 !important;
  }

  /* Premium Horizontal Metrics Bar */
  .account-stats-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
  }
  .account-stats-bar::-webkit-scrollbar { display: none; }
  .account-stats-bar > div {
    flex: 0 0 auto !important;
    min-width: 120px !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    padding: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
  }
  .account-stats-bar .vr { display: none !important; }
  
  /* Removed buggy Select2 custom z-index */

  /* Make dropdown a premium centered modal - REMOVED */
  
  /* Semi-transparent backdrop attached directly to the dropdown - REMOVED */
  
  .select2-results__options {
    max-height: 45vh !important; /* Ensure content scrolls smoothly */
  }

  @keyframes select2PopIn {
    from { opacity: 0; transform: scale(0.95) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* Fix Placeholder Visibility & Input Colors */
  .form-control, .form-select {
    color: #0f172a !important; /* Dark text for light mode */
  }
  .form-control::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
    font-weight: 500 !important;
  }
  
  /* Calendar Icon Visibility */
  ::-webkit-calendar-picker-indicator {
    filter: invert(0) !important; /* Ensure it stays dark */
    opacity: 0.6 !important;
    cursor: pointer !important;
  }
  
  /* Force Dropdown Menu Backgrounds to prevent transparency bugs */
  .dropdown-menu.show {
    background-color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .dropdown-item {
    background-color: #ffffff !important;
    color: #0f172a !important;
  }

  /* Prevent Modal Open Layout Shift (Screen Shake) */
  body.modal-open {
    padding-right: 0 !important;
    overflow-y: hidden !important;
  }
  body.modal-open .fixed-top,
  body.modal-open .fixed-bottom,
  body.modal-open .app-header,
  body.modal-open .navbar {
    padding-right: 0 !important;
  }
  body.modal-open .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Fix Nested Modal Z-Index Stacking (Action modals over Detail modal) */
  #accountDetailModal {
    z-index: 1055 !important;
  }
  #accountFormModal, #accountEntryModal, #customerLinkReviewModal {
    z-index: 1065 !important;
    background-color: rgba(15, 23, 42, 0.6) !important; /* Custom backdrop to cover detail modal */
  }

  /* Fix DateRangePicker Bleeding Off Screen */
  .daterangepicker {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 32px) !important;
    max-width: 360px !important;
    z-index: 1100 !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2) !important;
    margin: 0 !important;
  }
  .daterangepicker::before, .daterangepicker::after {
    display: none !important; /* Hide popup arrows */
  }

  /* Fix Modal Close Button Colors */
  .modal-header .close, .modal-header .close.text-white,
  .modal-header .btn-close, .modal-header .btn-close-white {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .modal-header .btn-close, .modal-header .btn-close-white {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
    background-size: 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Fix Nested Modals Layering */
  .modal.show ~ .modal.show {
    background: rgba(15, 23, 42, 0.4) !important; /* Darken background modal */
  }

  /* Hide useless DataTables elements on mobile */
  .dataTables_length, .dataTables_info, .dataTables_filter {
    display: none !important;
  }

  /* Sleek Ledger Stats Row */
  .modal-body .text-center .row.g-2 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
  }
  .modal-body .text-center .row.g-2::-webkit-scrollbar { display: none; }
  .modal-body .text-center .row.g-2 > div {
    flex: 1 !important;
    min-width: calc(33.33% - 6px) !important;
    padding: 0 !important;
  }
  .modal-body .text-center .row.g-2 .bg-light {
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    padding: 12px 8px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* ── 4. PREMIUM NATIVE LIST CARDS (Google Material Style) ── */
  .table-responsive:not(.recovery-history-table-wrap) {
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .recovery-history-table-wrap,
  #recoveryHistoryModal .recovery-history-table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #accountTable, #ledgerTable, #billsTable, #recentBillsTable, #recentLedgerTable, .modal-body:not(.recovery-modal-body) .table:not(.recovery-history-table) {
    width: 100% !important;
    min-width: 0 !important; 
    margin: 0 !important;
  }

  #recoveryHistoryModal .recovery-history-table {
    min-width: 780px !important;
    width: 780px !important;
  }

  .ui-mobile-cards thead { display: none !important; }
  .ui-mobile-cards tbody { display: flex !important; flex-direction: column !important; gap: 12px !important; }
  
  .ui-mobile-cards tbody tr {
    display: block !important;
    position: relative !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(149, 157, 165, 0.08) !important;
    padding: 12px !important;
    border: 1px solid #f1f5f9 !important;
  }
  
  .ui-mobile-cards tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 6px 0 !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-align: right !important;
  }
  
  .ui-mobile-cards tbody td::before {
    content: attr(data-label);
    color: #94a3b8 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    width: 40%;
    text-align: left !important;
  }

  #accountTable tbody td:nth-child(1) { display: none !important; }

  #accountTable tbody td:nth-child(2) {
    display: block !important;
    padding-bottom: 16px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: left !important;
  }
  #accountTable tbody td:nth-child(2)::before { display: none !important; }
  #accountTable tbody td:nth-child(2) .account-name-cell strong {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: block;
    margin-bottom: 4px;
  }
  #accountTable tbody td:nth-child(2) .account-name-cell small {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
  }
  #accountTable tbody td:nth-child(2) .badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
  }

  #accountTable tbody td:last-child {
    display: block !important;
    padding-top: 16px !important;
    margin-top: 12px !important;
    border-top: 1px solid #f1f5f9 !important;
  }
  #accountTable tbody td:last-child::before { display: none !important; }
  
  /* Fix all action stacks to wrap if they run out of space, preventing clipping */
  .account-action-stack, .bill-action-stack, .purchase-action-stack {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: flex-end !important; /* Right-aligned */
    flex-wrap: wrap !important; /* Allow wrapping to next line */
    padding-bottom: 4px !important;
  }
  
  .account-action-stack::-webkit-scrollbar, 
  .bill-action-stack::-webkit-scrollbar, 
  .purchase-action-stack::-webkit-scrollbar { 
    display: none !important; 
  }
  
  .account-action-stack .btn, .bill-action-stack .btn, .purchase-action-stack .btn {
    flex: 0 0 auto !important;
    height: 38px !important;
    width: 38px !important; /* Force square for uniform icon buttons */
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    padding: 0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
  }
  .account-action-stack .btn span, .bill-action-stack .btn span, .purchase-action-stack .btn span { 
    display: none !important; 
  }
  .account-action-stack .btn i, .bill-action-stack .btn i, .purchase-action-stack .btn i {
    margin: 0 !important;
  }

  /* ── 5. NAVIGATION & TOOLBARS ── */
  .account-toolbar {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 16px rgba(149, 157, 165, 0.05) !important;
    border: 1px solid #f1f5f9 !important;
  }
  
  .account-stats-bar {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 16px rgba(149, 157, 165, 0.05) !important;
    border: 1px solid #f1f5f9 !important;
  }
  
  /* ── 5.1 STATE-OF-THE-ART MOBILE BOTTOM DOCK ── */
  .mobile-bottom-nav {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 1045 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    height: 58px !important;
    padding: 0 4px !important;
    border-radius: 22px !important;
    background: rgba(15, 23, 42, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
    overflow: visible !important; /* Allow hero FAB to float slightly above */
  }

  .mobile-bottom-nav .nav-dock-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 4px 0 !important;
    border: none !important;
    background: transparent !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    gap: 3px !important;
    transition: transform 0.12s ease, color 0.12s ease !important;
    cursor: pointer !important;
  }
  .mobile-bottom-nav .nav-dock-item i {
    font-size: 16px !important;
    line-height: 1 !important;
    transition: transform 0.12s ease, filter 0.12s ease !important;
  }
  .mobile-bottom-nav .nav-dock-item span {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .mobile-bottom-nav .nav-dock-item.is-active,
  .mobile-bottom-nav .nav-dock-item:active {
    color: #38bdf8 !important;
    transform: scale(0.96) !important;
  }
  .mobile-bottom-nav .nav-dock-item.is-active i {
    filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.35)) !important;
  }

  /* Glowing Center Hero FAB (+ Button) - perfectly balanced, contained shadow */
  .mobile-bottom-nav .mobile-nav-hero-fab {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    text-decoration: none !important;
    position: relative !important;
    top: -6px !important;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
  .mobile-bottom-nav .mobile-nav-hero-fab.is-active,
  .mobile-bottom-nav .mobile-nav-hero-fab:hover,
  .mobile-bottom-nav .mobile-nav-hero-fab:active,
  .mobile-bottom-nav .mobile-nav-hero-fab:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }
  .mobile-bottom-nav .nav-dock-item,
  .mobile-bottom-nav .nav-dock-item.is-active,
  .mobile-bottom-nav .nav-dock-item:hover,
  .mobile-bottom-nav .nav-dock-item:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  .mobile-bottom-nav .mobile-nav-hero-fab .fab-circle {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 15px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
    border: 2.5px solid #0f172a !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
  }
  /* When active, keep light contained strictly inside the button and menu */
  .mobile-bottom-nav .mobile-nav-hero-fab.is-active .fab-circle {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
  }
  .mobile-bottom-nav .mobile-nav-hero-fab:active .fab-circle {
    transform: scale(0.92) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  }

  /* Elevated Floating Submit Button on Billing & Purchases Workspace */
  .billing-shell .cb-submit-wrap {
    position: fixed !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 72px) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 120 !important; /* Stays below mobile sidebar (z-index 340) and overlay (z-index 330) */
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .billing-shell .cb-submit-wrap .cb-save-btn {
    pointer-events: auto !important;
    width: 100% !important;
  }
  .billing-shell {
    padding-bottom: calc(max(10px, env(safe-area-inset-bottom)) + 145px) !important;
  }

  body.sidebar-open .billing-shell .cb-submit-wrap,
  body.modal-open .billing-shell .cb-submit-wrap {
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.15 !important;
  }

  /* Prevent background screen shaking/jitter when opening Quick Tools Hub modal */
  body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important; /* Overrides Bootstrap's 17px inline scrollbar shift */
  }
  .modal {
    padding-right: 0 !important;
  }
  body.modal-open .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body.modal-open .main-header,
  body.modal-open .app-topbar,
  body.modal-open .billing-shell .cb-submit-wrap {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  /* ── 5.2 NATIVE QUICK TOOLS HUB (CENTERED FLOATING MODAL) ── */
  .mobile-hub-modal {
    padding: 0 !important;
    padding-right: 0 !important;
  }
  .mobile-hub-modal .mobile-hub-dialog,
  .mobile-hub-modal .modal-dialog-bottom-sheet {
    max-width: 440px !important;
    width: calc(100% - 24px) !important;
    margin: 1.5rem auto !important;
    min-height: calc(100% - 3rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1055 !important;
  }
  .mobile-hub-modal.fade .mobile-hub-dialog,
  .mobile-hub-modal.fade .modal-dialog-bottom-sheet {
    transition: transform 0.22s ease-out, opacity 0.2s ease !important;
    transform: scale(0.96) !important;
    opacity: 0 !important;
  }
  .mobile-hub-modal.show .mobile-hub-dialog,
  .mobile-hub-modal.show .modal-dialog-bottom-sheet {
    transform: scale(1) !important;
    opacity: 1 !important;
  }
  .mobile-hub-modal .modal-content {
    border-radius: 24px !important;
    max-height: calc(100vh - 4.5rem) !important;
    max-height: calc(100dvh - 4.5rem) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
  }
  .mobile-hub-modal .modal-header.mobile-hub-header {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    padding: 14px 18px 10px 18px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    z-index: 2 !important;
  }
  .mobile-hub-modal .mobile-hub-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 14px 16px 18px 16px !important;
    background: #f8fafc !important;
  }
  .mobile-hub-modal .modal-footer.mobile-hub-footer {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.04) !important;
    margin: 0 !important;
    z-index: 2 !important;
  }
  .mobile-hub-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .btn-hub-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    border: none !important;
    text-decoration: none !important;
    transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .btn-hub-action:active {
    transform: scale(0.97) !important;
  }
  .btn-hub-close {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
  }
  .btn-hub-close i {
    font-size: 13px !important;
    color: #64748b !important;
  }
  .btn-hub-close:active {
    background: #e2e8f0 !important;
    color: #1e293b !important;
  }
  .btn-hub-menu {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important;
  }
  .btn-hub-menu i {
    font-size: 13px !important;
    color: #60a5fa !important;
  }
  .btn-hub-menu:active {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2) !important;
    background: #0f172a !important;
  }

  /* Clear high-contrast Close button */
  .btn-sheet-close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #e2e8f0 !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: transform 0.12s ease, background-color 0.12s ease !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  .btn-sheet-close:active {
    transform: scale(0.92) !important;
    background: #cbd5e1 !important;
  }
  body.dark-mode .btn-sheet-close,
  [data-theme="dark"] .btn-sheet-close {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
  }
  body.dark-mode .btn-sheet-close:active,
  [data-theme="dark"] .btn-sheet-close:active {
    background: #334155 !important;
  }
  .mobile-sheet-pill {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #cbd5e1;
  }
  .hub-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #0f172a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
  }
  .mobile-hub-section-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
  }

  /* Fast-Track Horizontal Pill Strip */
  .mobile-hub-fast-track {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .mobile-hub-fast-track::-webkit-scrollbar {
    display: none !important;
  }
  .mobile-hub-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    flex-shrink: 0 !important;
    transition: transform 0.12s ease !important;
  }
  .mobile-hub-pill:active {
    transform: scale(0.95) !important;
    background: #f1f5f9 !important;
  }
  .mobile-hub-pill.active {
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
  }

  /* Categorized Grid Cards */
  .mobile-hub-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .mobile-hub-grid-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.12s ease !important;
  }
  .mobile-hub-grid-card:active {
    transform: scale(0.96) !important;
    background: #f8fafc !important;
  }
  .mobile-hub-grid-card .card-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    color: #2563eb !important;
    flex-shrink: 0 !important;
  }
  .mobile-hub-grid-card .card-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  /* ── 6. PERFECT TOP NAVBAR ── */
  .main-header.navbar.app-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-bottom: 8px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
  }
  
  body.app-search-open .app-header-search {
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    background: #ffffff !important;
  }
  
  /* ── 7. NAVBAR ALIGNMENT & ICONS ── */
  .app-header-grid {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
  }
  
  .app-header-left { align-items: center !important; }
  .app-header-actions { display: flex !important; align-items: center !important; gap: 8px !important; }

  .app-header-shortcuts {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: none !important;
    overflow: visible !important;
  }
  .app-header-shortcuts span { display: none !important; }
  .app-header-shortcuts a[href*="invoice"] { display: none !important; }

  .app-header-shortcuts .btn, 
  .app-header-shortcuts .app-icon-action,
  .app-header-shortcuts .theme-toggle-btn,
  .app-command-button {
    padding: 0 !important;
    min-height: 38px !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important; 
    background: #f1f5f9 !important;
    border: none !important;
    color: #475569 !important;
    box-shadow: none !important;
  }
  .app-command-button span { display: none !important; }
  
  /* Fix giant Notification Badge */
  #notification-count {
    display: flex !important; 
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    padding: 0 !important;
    border-radius: 50% !important; /* Force true circle */
    font-size: 10px !important;
    font-weight: 800 !important;
    background: #ef4444 !important;
    color: #fff !important;
    border: 2px solid #ffffff !important;
    transform: none !important;
    line-height: 1 !important;
  }
  
  .app-notification-link { position: relative !important; }

  /* Fix Avatar Squishing & Remove weird background/caret */
  .app-user-trigger {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
  }
  .app-user-trigger::after {
    display: none !important; /* Hide dropdown chevron on mobile */
  }
  .app-user-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important; /* Prevent oval squishing */
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  /* Fix Logout Menu transparent ghost bug */
  .app-header-user-menu {
    position: relative !important; /* Required for Popper */
  }
  .app-header-user-menu .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important; /* Disable Bootstrap's broken mobile transform */
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    padding: 8px !important;
    background: #ffffff !important; /* Fix the transparent background */
    min-width: 180px !important;
    z-index: 1060 !important;
  }
  .app-header-user-menu .dropdown-item {
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .app-header-user-menu .dropdown-item:active {
    background: #f1f5f9 !important;
    color: #0f172a !important;
  }

  /* ── 8. DARK MODE PERFECTION ── */
  body.dark-mode .content-wrapper,
  body.dark-mode html, body.dark-mode body {
    background: #0f172a !important;
  }

  body.dark-mode .main-header.navbar.app-topbar {
    background: rgba(15, 23, 42, 0.95) !important;
    border-bottom-color: #1e293b !important;
  }

  body.dark-mode .app-header-shortcuts .btn, 
  body.dark-mode .app-header-shortcuts .app-icon-action,
  body.dark-mode .app-header-shortcuts .theme-toggle-btn,
  body.dark-mode .app-command-button {
    background: #1e293b !important;
    color: #94a3b8 !important;
  }

  body.dark-mode #notification-count {
    border-color: #1e293b !important;
  }

  body.dark-mode .account-toolbar,
  body.dark-mode .account-stats-bar,
  body.dark-mode .ui-mobile-cards tbody tr {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
  }

  body.dark-mode .ui-mobile-cards tbody td {
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
  }

  body.dark-mode .ui-mobile-cards tbody td::before {
    color: #64748b !important;
  }

  body.dark-mode #accountTable tbody td:nth-child(2) {
    border-bottom-color: #334155 !important;
  }
  body.dark-mode #accountTable tbody td:nth-child(2) .account-name-cell strong {
    color: #f1f5f9 !important;
  }
  body.dark-mode #accountTable tbody td:nth-child(2) .account-name-cell small {
    color: #94a3b8 !important;
  }

  body.dark-mode #accountTable tbody td:last-child {
    border-top-color: #334155 !important;
  }

  body.dark-mode .account-action-stack .btn {
    background: #334155 !important;
    color: #f8fafc !important;
  }

  body.dark-mode .app-header-user-menu .dropdown-menu {
    background: #1e293b !important;
    border-color: #334155 !important;
  }
  body.dark-mode .app-header-user-menu .dropdown-item,
  body.dark-mode .dropdown-item {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
  }
  body.dark-mode .app-header-user-menu .dropdown-item:active,
  body.dark-mode .dropdown-item:active {
    background: #334155 !important;
    color: #f8fafc !important;
  }
  
  /* Dark Mode Calendar Icon & Input Text */
  body.dark-mode .form-control, body.dark-mode .form-select {
    color: #f8fafc !important;
  }
  body.dark-mode .form-control::placeholder {
    color: #94a3b8 !important;
  }
  body.dark-mode ::-webkit-calendar-picker-indicator {
    filter: invert(1) !important; /* Turns black icon into white icon */
    opacity: 0.8 !important;
  }

  /* Complete Modal Dark Mode */
  body.dark-mode .modal-content,
  [data-theme="dark"] .modal-content {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
  }
  body.dark-mode .modal-header,
  [data-theme="dark"] .modal-header {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
  }
  body.dark-mode .modal-title,
  [data-theme="dark"] .modal-title {
    color: #f8fafc !important;
  }
  body.dark-mode .modal-header .btn-close,
  [data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.8 !important;
  }
  body.dark-mode .modal-body,
  [data-theme="dark"] .modal-body {
    background: #0f172a !important;
    color: #cbd5e1 !important;
  }
  body.dark-mode .modal-footer,
  [data-theme="dark"] .modal-footer {
    background: #1e293b !important;
    border-top: 1px solid #334155 !important;
  }
  body.dark-mode .modal-footer .btn-outline-secondary,
  [data-theme="dark"] .modal-footer .btn-outline-secondary {
    color: #cbd5e1 !important;
    border-color: #475569 !important;
    background: transparent !important;
  }

  /* Financial Confirmation Cards Dark Mode */
  body.dark-mode .bill-action-modal .bg-white.border.rounded-3,
  body.dark-mode #viewBillModal .bg-white.border.rounded-3,
  body.dark-mode #viewPurchaseModal .bg-white.border.rounded-3,
  [data-theme="dark"] .bill-action-modal .bg-white.border.rounded-3,
  [data-theme="dark"] #viewBillModal .bg-white.border.rounded-3,
  [data-theme="dark"] #viewPurchaseModal .bg-white.border.rounded-3 {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }
  body.dark-mode .bill-action-modal label,
  body.dark-mode .bill-action-modal .form-label,
  body.dark-mode #viewBillModal label,
  body.dark-mode #viewBillModal .form-label,
  body.dark-mode #viewPurchaseModal label,
  body.dark-mode #viewPurchaseModal .form-label,
  body.dark-mode #recoveryPaymentModal label,
  body.dark-mode #recoveryPaymentModal .recovery-form-label,
  body.dark-mode .recovery-modal-body label,
  body.dark-mode .recovery-form-label,
  body.dark-mode #accountEntryModal label,
  body.dark-mode #accountEntryModal .account-entry-label,
  body.dark-mode #accountEntryModal .form-label,
  body.dark-mode .account-entry-body label,
  body.dark-mode .account-entry-label,
  [data-theme="dark"] .bill-action-modal label,
  [data-theme="dark"] .bill-action-modal .form-label,
  [data-theme="dark"] #viewBillModal label,
  [data-theme="dark"] #viewBillModal .form-label,
  [data-theme="dark"] #viewPurchaseModal label,
  [data-theme="dark"] #viewPurchaseModal .form-label,
  [data-theme="dark"] #recoveryPaymentModal label,
  [data-theme="dark"] #recoveryPaymentModal .recovery-form-label,
  [data-theme="dark"] .recovery-modal-body label,
  [data-theme="dark"] .recovery-form-label,
  [data-theme="dark"] #accountEntryModal label,
  [data-theme="dark"] #accountEntryModal .account-entry-label,
  [data-theme="dark"] #accountEntryModal .form-label,
  [data-theme="dark"] .account-entry-body label,
  [data-theme="dark"] .account-entry-label {
    color: #94a3b8 !important;
  }
  body.dark-mode .bill-action-modal .text-uppercase.mb-2,
  body.dark-mode #viewBillModal .text-uppercase.mb-2,
  body.dark-mode #viewPurchaseModal .text-uppercase.mb-2,
  [data-theme="dark"] .bill-action-modal .text-uppercase.mb-2,
  [data-theme="dark"] #viewBillModal .text-uppercase.mb-2,
  [data-theme="dark"] #viewPurchaseModal .text-uppercase.mb-2 {
    color: #38bdf8 !important;
  }

  /* Readonly Calculated Fields Dark Mode */
  body.dark-mode .bill-action-modal input[readonly],
  body.dark-mode #viewBillModal input[readonly],
  body.dark-mode #viewPurchaseModal input[readonly],
  [data-theme="dark"] .bill-action-modal input[readonly],
  [data-theme="dark"] #viewBillModal input[readonly],
  [data-theme="dark"] #viewPurchaseModal input[readonly] {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
  }

  /* Quick Payment buttons in Dark Mode */
  body.dark-mode .bill-quick-payments .btn,
  [data-theme="dark"] .bill-quick-payments .btn {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
  }

  /* Items Table in Items Modals Dark Mode */
  body.dark-mode #billItemsModal .table-responsive,
  body.dark-mode #purchaseItemsModal .table-responsive,
  [data-theme="dark"] #billItemsModal .table-responsive,
  [data-theme="dark"] #purchaseItemsModal .table-responsive {
    background: #1e293b !important;
    border-color: #334155 !important;
  }
  body.dark-mode #billItemsTable,
  body.dark-mode #purchaseItemsTable,
  [data-theme="dark"] #billItemsTable,
  [data-theme="dark"] #purchaseItemsTable {
    color: #cbd5e1 !important;
  }
  body.dark-mode #billItemsTable thead th,
  body.dark-mode #purchaseItemsTable thead th,
  [data-theme="dark"] #billItemsTable thead th,
  [data-theme="dark"] #purchaseItemsTable thead th {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
  }
  body.dark-mode #billItemsTable td,
  body.dark-mode #purchaseItemsTable td,
  [data-theme="dark"] #billItemsTable td,
  [data-theme="dark"] #purchaseItemsTable td {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
  }

  /* Summary top header inside confirm modal in Dark Mode */
  body.dark-mode .bill-mini-summary,
  [data-theme="dark"] .bill-mini-summary {
    background: #1e293b !important;
    border-color: #334155 !important;
  }
  body.dark-mode .bill-mini-title strong,
  [data-theme="dark"] .bill-mini-title strong {
    color: #f8fafc !important;
  }
  body.dark-mode .bill-mini-title span,
  [data-theme="dark"] .bill-mini-title span {
    color: #94a3b8 !important;
  }
  body.dark-mode .bill-mini-grid span,
  [data-theme="dark"] .bill-mini-grid span {
    background: #0f172a !important;
    border-color: #334155 !important;
  }
  body.dark-mode .bill-mini-grid span small,
  [data-theme="dark"] .bill-mini-grid span small {
    color: #94a3b8 !important;
  }
  body.dark-mode .bill-mini-grid span b,
  [data-theme="dark"] .bill-mini-grid span b {
    color: #f8fafc !important;
  }

  /* Dark Mode Mobile Tools Hub Sheet */
  body.dark-mode .mobile-hub-modal .modal-content,
  [data-theme="dark"] .mobile-hub-modal .modal-content {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
  }
  body.dark-mode .mobile-hub-header,
  [data-theme="dark"] .mobile-hub-header {
    background: #0f172a !important;
  }
  body.dark-mode #mobileQuickHubTitle,
  [data-theme="dark"] #mobileQuickHubTitle {
    color: #f8fafc !important;
  }
  body.dark-mode .mobile-sheet-pill,
  [data-theme="dark"] .mobile-sheet-pill {
    background: #334155 !important;
  }
  body.dark-mode .hub-avatar,
  [data-theme="dark"] .hub-avatar {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
  }
  body.dark-mode .mobile-hub-pill,
  [data-theme="dark"] .mobile-hub-pill {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
  }
  body.dark-mode .mobile-hub-grid-card,
  [data-theme="dark"] .mobile-hub-grid-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
  }
  body.dark-mode .mobile-hub-grid-card .card-icon-wrap,
  [data-theme="dark"] .mobile-hub-grid-card .card-icon-wrap {
    background: #0f172a !important;
    color: #38bdf8 !important;
  }
  body.dark-mode .mobile-hub-section-label,
  [data-theme="dark"] .mobile-hub-section-label {
    color: #94a3b8 !important;
  }
  body.dark-mode .mobile-hub-modal .mobile-hub-body,
  [data-theme="dark"] .mobile-hub-modal .mobile-hub-body {
    background: #090d16 !important;
  }
  body.dark-mode .mobile-hub-modal .modal-footer.mobile-hub-footer,
  [data-theme="dark"] .mobile-hub-modal .modal-footer.mobile-hub-footer {
    background: #0f172a !important;
    border-top: 1px solid #1e293b !important;
  }
  body.dark-mode .btn-hub-close,
  [data-theme="dark"] .btn-hub-close {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border: 1px solid #334155 !important;
  }
  body.dark-mode .btn-hub-close i,
  [data-theme="dark"] .btn-hub-close i {
    color: #94a3b8 !important;
  }
  body.dark-mode .btn-hub-close:active,
  [data-theme="dark"] .btn-hub-close:active {
    background: #334155 !important;
    color: #ffffff !important;
  }
  body.dark-mode .btn-hub-menu,
  [data-theme="dark"] .btn-hub-menu {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
  }
  body.dark-mode .btn-hub-menu i,
  [data-theme="dark"] .btn-hub-menu i {
    color: #bfdbfe !important;
  }
  body.dark-mode .btn-hub-menu:active,
  [data-theme="dark"] .btn-hub-menu:active {
    background: #1d4ed8 !important;
  }
}

/* ── Floating Scroll-to-Top Button ── */
.btn-scroll-top {
  position: fixed;
  right: 18px;
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 80px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
  color: #ffffff !important;
  border: none;
  box-shadow: 0 4px 16px rgba(13, 110, 253, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  touch-action: manipulation;
}
.btn-scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.btn-scroll-top:active {
  transform: scale(0.92) !important;
}
body.dark-mode .btn-scroll-top,
[data-theme="dark"] .btn-scroll-top {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* Ensure Mobile Tools Hub centered modal on tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .mobile-hub-modal .mobile-hub-dialog,
  .mobile-hub-modal .modal-dialog-bottom-sheet {
    max-width: 480px !important;
    width: calc(100% - 32px) !important;
    margin: 2rem auto !important;
    min-height: calc(100% - 4rem) !important;
  }
}

/* Fix desktop mode horizontal scroll bleed */
@media screen and (max-width: 1024px) {
  .wrapper {
    overflow-x: hidden;
  }
}