/* ============================================================
   Global Mobile Responsiveness — Internet Portal
   Include AFTER Tailwind CDN on every page.
   ============================================================ */

/* ---- Safe Area & Viewport Fixes ---- */
html, body {
  /* Prevent horizontal scroll leakage */
  max-width: 100vw;
  overflow-x: hidden;
}

/* Constrain tab content and table containers within flex layouts */
.tab-content {
  min-width: 0;
  overflow: hidden;
}
.tab-content > .bg-white {
  min-width: 0;
  overflow: hidden;
}
.tab-content .overflow-x-auto {
  min-width: 0;
  max-width: 100%;
}


@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---- Base mobile fixes ---- */
@media (max-width: 1023px) {

  /* --- Header --- */
  header .text-2xl { font-size: 1.25rem; }                /* Shrink page title */
  header .space-x-4 { gap: 0.5rem; }                      /* Tighten header controls */

  /* --- Global Table-to-Card Mobile Transformation --- */
  /* Hides thead and converts each <tr> into a stacked card with labels */

  /* Tables opted into card mode via .mobile-card-table or via the global JS */
  .mobile-card-table thead,
  table[data-mobile-cards] thead {
    display: none;
  }

  .mobile-card-table tbody,
  table[data-mobile-cards] tbody {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .mobile-card-table tbody tr,
  table[data-mobile-cards] tbody tr {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 0.75rem 0.875rem;
    gap: 0.35rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-card-table tbody tr:active,
  table[data-mobile-cards] tbody tr:active {
    transform: scale(0.985);
  }

  .mobile-card-table tbody td,
  table[data-mobile-cards] tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0 !important;
    border: none !important;
    font-size: 0.8rem;
    position: static !important;
    white-space: normal !important;
  }

  .mobile-card-table tbody td::before,
  table[data-mobile-cards] tbody td::before {
    content: attr(data-label);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    flex-shrink: 0;
    margin-right: 0.75rem;
    min-width: 5rem;
  }

  /* Hide label for action columns */
  .mobile-card-table tbody td:last-child::before,
  table[data-mobile-cards] tbody td:last-child::before {
    display: none;
  }
  .mobile-card-table tbody td:last-child,
  table[data-mobile-cards] tbody td:last-child {
    justify-content: flex-end;
    padding-top: 0.4rem !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 0.2rem;
    gap: 0.375rem;
  }

  /* Empty state rows span full width */
  .mobile-card-table tbody tr td[colspan],
  table[data-mobile-cards] tbody tr td[colspan] {
    text-align: center;
    justify-content: center;
  }
  .mobile-card-table tbody tr td[colspan]::before,
  table[data-mobile-cards] tbody tr td[colspan]::before {
    display: none;
  }

  /* Remove the old scroll hint on card-mode tables */
  .mobile-card-table + .overflow-x-auto::after,
  .overflow-x-auto:has(.mobile-card-table)::after,
  .overflow-x-auto:has(table[data-mobile-cards])::after {
    display: none;
  }
  .overflow-x-auto:has(.mobile-card-table),
  .overflow-x-auto:has(table[data-mobile-cards]) {
    overflow-x: visible;
  }

  /* Fallback for tables NOT opted into card mode */
  table:not(.mobile-card-table):not([data-mobile-cards]) { font-size: 0.75rem; }
  table:not(.mobile-card-table):not([data-mobile-cards]) th { font-size: 0.65rem; padding: 0.4rem 0.5rem; white-space: nowrap; }
  table:not(.mobile-card-table):not([data-mobile-cards]) td { padding: 0.4rem 0.5rem; }
  table:not(.mobile-card-table):not([data-mobile-cards]) th:last-child,
  table:not(.mobile-card-table):not([data-mobile-cards]) td:last-child { position: sticky; right: 0; background: inherit; z-index: 1; }

  /* Scroll hint: subtle gradient shadow on the right edge */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    position: relative;
  }
  .overflow-x-auto::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(to left, rgba(0,0,0,0.04), transparent);
    pointer-events: none;
    z-index: 2;
  }

  /* --- Modals: Full-width / Bottom Sheet conversion --- */
  /* By default generic modals become 100% width with margin */
  .fixed.inset-0 > div:not(.bottom-sheet-modal) {
    max-width: 100% !important;
    margin: 0.5rem;
    border-radius: 0.75rem;
  }

  /* Bottom sheet modal pattern (overrides wide centered desktop modals) */
  .bottom-sheet-modal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    max-height: 85vh !important;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* Bottom Sheet Action Bar (Sticky Footer inside form) */
  .bottom-sheet-modal form {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .bottom-sheet-modal .overflow-y-auto {
    flex: 1;
    overflow-y: auto;
  }
  .bottom-sheet-modal .sticky-modal-footer {
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 10;
    padding-top: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    /* ensure buttons are easy to tap */
    display: flex;
    flex-direction: column; 
    gap: 0.5rem;
  }
  .bottom-sheet-modal .sticky-modal-footer button {
    width: 100%; /* full width buttons on phone */
  }

  /* --- Forms: fix cramped grids on mobile --- */
  .grid.grid-cols-3 { grid-template-columns: 1fr !important; }  /* Stack 3-col grids */
  .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* --- Global Stat Card Compact (all pages) --- */
  main > .grid.gap-6.mb-6,
  main > .grid.gap-6.mb-8 {
    gap: 0.625rem !important;
    margin-bottom: 0.75rem !important;
  }
  main > .grid.gap-6.mb-6 > .bg-white.rounded-xl,
  main > .grid.gap-6.mb-8 > .bg-white.rounded-xl,
  main > .grid.lg\:gap-6.mb-4 > .bg-white.rounded-xl {
    padding: 0.75rem 0.875rem !important;
    border-radius: 1rem !important;
  }
  main > .grid.gap-6.mb-6 .flex-shrink-0 > div,
  main > .grid.gap-6.mb-8 .flex-shrink-0 > div {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 0.625rem !important;
  }
  main > .grid.gap-6.mb-6 .flex-shrink-0 > div i,
  main > .grid.gap-6.mb-8 .flex-shrink-0 > div i,
  main > .grid.gap-6.mb-6 .flex-shrink-0 > div .app-lucide-host {
    font-size: 0.8rem !important;
  }
  main > .grid.gap-6.mb-6 p.text-sm,
  main > .grid.gap-6.mb-8 p.text-sm,
  main > .grid.lg\:gap-6.mb-4 p.text-sm {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }
  main > .grid.gap-6.mb-6 .text-2xl,
  main > .grid.gap-6.mb-8 .text-2xl,
  main > .grid.lg\:gap-6.mb-4 .text-2xl {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  main > .grid.gap-6.mb-6 .ml-4,
  main > .grid.gap-6.mb-8 .ml-4,
  main > .grid.gap-6.mb-6 .ml-3,
  main > .grid.gap-6.mb-8 .ml-3 {
    margin-left: 0.625rem !important;
    min-width: 0;
    overflow: hidden;
  }

  /* --- Touch targets: minimum 44px --- */
  button, a.btn, select, input[type="text"], input[type="number"], input[type="date"], input[type="password"] {
    min-height: 44px; /* Apple Human Interface Guideline standard */
  }
  table button, table a {
    min-height: 36px; /* Smaller in tables to save space, but larger than 28px */
    min-width: 36px;
  }

  /* --- Toast notifications: full width on mobile --- */
  #notificationContainer {
    left: 1rem !important;
    right: 1rem !important;
    max-width: none !important;
    bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }

  /* --- Sidebar: ensure it covers full height --- */
  #sidebar {
    height: 100vh;
    height: 100dvh;   /* dynamic viewport height for iOS */
  }

  /* --- Hybrid Table-to-Card Rendering Helpers --- */
  .mobile-hybrid-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .hybrid-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .hybrid-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.05em;
  }
  
  .hybrid-card-value {
    font-size: 0.875rem;
    color: #111827;
    font-weight: 500;
    text-align: right;
  }

  .hybrid-card-actions {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  /* --- Sticky Action Bar for Page Controls --- */
  .sticky-action-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e5e7eb;
    margin: -1.5rem -1rem 1rem -1rem; /* Negative margins to push it to the edges of the content padded area */
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Universal sticky toolbar — sticks to top when scrolling */
  .universal-sticky-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
  }

  /* Contain table horizontal scroll within card containers */
  .overflow-x-auto {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Universal Mobile Table Styling --- */
  /* All tables stay as proper tables on mobile (no card conversion) */
  main table thead,
  .tab-content table thead,
  .overflow-x-auto table thead {
    display: table-header-group !important;
  }
  main table tbody,
  .tab-content table tbody,
  .overflow-x-auto table tbody {
    display: table-row-group !important;
  }
  main table tbody tr,
  .tab-content table tbody tr,
  .overflow-x-auto table tbody tr {
    display: table-row !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  main table tbody td,
  .tab-content table tbody td,
  .overflow-x-auto table tbody td {
    display: table-cell !important;
    padding: 0.35rem 0.45rem !important;
    font-size: 0.75rem;
    white-space: nowrap;
  }
  main table tbody td::before,
  .tab-content table tbody td::before,
  .overflow-x-auto table tbody td::before {
    display: none !important;
  }

  /* Alternating row colors for readability */
  main table tbody tr:nth-child(even),
  .tab-content table tbody tr:nth-child(even),
  .overflow-x-auto table tbody tr:nth-child(even) {
    background-color: #f8fafc;
  }
  main table tbody tr:nth-child(odd),
  .tab-content table tbody tr:nth-child(odd),
  .overflow-x-auto table tbody tr:nth-child(odd) {
    background-color: #ffffff;
  }

  /* Force action buttons inline (no wrapping) */
  main table tbody td:last-child,
  .tab-content table tbody td:last-child,
  .overflow-x-auto table tbody td:last-child {
    white-space: nowrap !important;
  }
  main table tbody td:last-child button,
  main table tbody td:last-child a,
  .tab-content table tbody td:last-child button,
  .tab-content table tbody td:last-child a,
  .overflow-x-auto table tbody td:last-child button,
  .overflow-x-auto table tbody td:last-child a {
    display: inline-flex !important;
    min-height: 28px !important;
    min-width: 28px !important;
    padding: 0.15rem !important;
  }

  /* Compact header and cell sizing */
  main table th,
  main table td,
  .tab-content table th,
  .tab-content table td,
  .overflow-x-auto table th,
  .overflow-x-auto table td {
    font-size: 0.7rem;
    padding: 0.3rem 0.4rem !important;
  }

  .sticky-action-bar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }


  /* ---- Payments Page: Modern App-Like Mobile UI ---- */

  /* Compact 2×2 stat grid */
  .payments-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .payments-stats-grid > div {
    padding: 0.6rem 0.75rem !important;
    border-radius: 1rem !important;
  }
  .payments-stats-grid .stat-icon-wrap {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
  }
  .payments-stats-grid .stat-icon-wrap i {
    font-size: 0.7rem;
  }
  .payments-stats-grid .stat-label {
    font-size: 0.6rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .payments-stats-grid .stat-value {
    font-size: 0.95rem !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Ensure text container doesn't overflow card */
  .payments-stats-grid > div .ml-3,
  .payments-stats-grid > div .ml-4 {
    min-width: 0;
    overflow: hidden;
  }
  /* Also target non-classed stat values (text-2xl inside stats) */
  .payments-stats-grid > div .text-2xl {
    font-size: 0.95rem !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .payments-stats-grid > div .text-xl {
    font-size: 0.85rem !important;
    line-height: 1.2;
  }
  .payments-stats-grid > div .text-sm {
    font-size: 0.6rem !important;
    line-height: 1.1;
  }

  /* Hide desktop table, show mobile cards */
  .payments-desktop-table {
    display: none !important;
  }
  .payments-mobile-list {
    display: block !important;
  }

  /* Hide desktop header bar (add btn + search) */
  .payments-desktop-header {
    display: none !important;
  }

  /* Sticky mobile search */
  .payments-mobile-search-wrap {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(243, 244, 246, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.375rem 0;
    margin: 0 0 0.5rem 0;
  }
  .payments-mobile-search-wrap input {
    width: 100%;
    border-radius: 0.875rem;
    padding: 0.7rem 1rem 0.7rem 2.75rem;
    font-size: 0.875rem;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .payments-mobile-search-wrap input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.15);
    outline: none;
  }

  /* Payment mobile card */
  .payment-mobile-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1rem 1.125rem;
    margin-bottom: 0.625rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .payment-mobile-card:active {
    transform: scale(0.985);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  }
  .payment-mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .payment-mobile-card-client {
    font-weight: 650;
    font-size: 0.9rem;
    color: #1e293b;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
  }
  .payment-mobile-card-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: #16a34a;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
  .payment-mobile-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .payment-mobile-card-meta span {
    font-size: 0.75rem;
    color: #64748b;
  }
  .payment-mobile-card-meta .method-pill {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    text-transform: capitalize;
  }
  .payment-mobile-card-meta .date-text {
    font-size: 0.75rem;
    color: #94a3b8;
  }
  .payment-mobile-card-balance {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    color: #94a3b8;
    padding-top: 0.375rem;
    border-top: 1px solid #f1f5f9;
  }
  .payment-mobile-card-balance .bal-arrow {
    color: #cbd5e1;
  }

  /* Universal Floating Action Button */
  .universal-fab {
    display: flex !important;
    position: fixed;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    right: 1.25rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.125rem;
    color: #fff;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 1.5rem;
    z-index: 40;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .universal-fab.hidden {
    display: none !important;
  }
  .universal-fab:active {
    transform: scale(0.92);
  }
  
  /* Fallback shadow if background class doesn't provide one */
  .universal-fab:not([class*="shadow"]) {
    box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.1);
  }
  .universal-fab:not([class*="shadow"]):active {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }

  /* Hide desktop-only headers/toolbars on mobile */
  .expenses-desktop-header,
  .transactions-desktop-header {
    display: none !important;
  }

  /* Hide scrollbar on horizontal-scroll tab navs */
  nav[style*="scrollbar-width"]::-webkit-scrollbar {
    display: none;
  }

  /* Mobile payment list section card */
  .payments-list-card-mobile {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* ---- Billings Page: Same app-like treatment as Payments ---- */

  /* Hide desktop header bar on mobile */
  .billings-desktop-header {
    display: none !important;
  }

  /* Sticky mobile search */
  .billings-mobile-search-wrap {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(243, 244, 246, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.375rem 0;
    margin: 0 0 0.5rem 0;
  }
  .billings-mobile-search-wrap input {
    width: 100%;
    border-radius: 0.875rem;
    padding: 0.7rem 1rem 0.7rem 2.75rem;
    font-size: 0.875rem;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .billings-mobile-search-wrap input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.15);
    outline: none;
  }

  /* Billings card transparent on mobile */
  .billings-list-card-mobile {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* ---- Extra small screens (< 480px) ---- */
@media (max-width: 479px) {

  /* Even tighter table sizing */
  table { font-size: 0.7rem; }
  table th,
  table td { padding: 0.3rem 0.35rem; }

  /* Keep header row layout — router dropdown stays top-right */
  header .flex.items-center.justify-between {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
  }
  header h2.text-2xl, header .text-2xl { font-size: 1.05rem; }

  /* Badges / status pills: smaller */
  .px-2.py-1.rounded-full,
  span[class*="rounded-full"] {
    font-size: 0.6rem;
    padding: 0.15rem 0.4rem;
  }

  /* Charts: prevent overflow on tiny screens */
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ---- Landscape phones ---- */
@media (max-width: 1023px) and (orientation: landscape) {
  /* Limit modal height so keyboard doesn't push it off */
  .fixed.inset-0 > div {
    max-height: 80vh !important;
  }
}

/* ---- Print: hide sidebar and mobile elements ---- */
@media print {
  #sidebar,
  #mobileMenuBtn,
  #mobileMenuOverlay,
  #notificationContainer { display: none !important; }
  main { margin: 0; padding: 0; }
}