/* Mobile-only layout fixes for Dashboard + Inventory.
   Goal: prevent overflow/squishing without changing desktop. */

@media (max-width: 768px) {
  /* ZOOM OUT: Mobile-only zoom to match desktop scale (75%) */
  html {
    zoom: 0.75;
    -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjustment */
  }
  
  /* CRITICAL: Allow vertical scrolling on mobile - don't lock body height */
  html, body {
    height: auto !important;
    min-height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Prevent accidental horizontal page scrolling on mobile */
  body[data-page="dashboard"],
  body[data-page="inventory"],
  body[data-page="expenses"],
  body[data-page="analytics"] {
    overflow-x: hidden;
    overflow-y: auto !important;
  }
  
  /* Fix: Change h-screen to min-h-screen on mobile so pages can scroll */
  .flex.h-screen,
  div.flex.h-screen {
    height: auto !important;
    min-height: 100vh !important;
  }

  /* Global: stop tables/grids from forcing horizontal scroll on mobile by allowing wrapping */
  table {
    width: 100% !important;
    table-layout: fixed !important;
  }
  th, td {
    word-break: break-word;
    white-space: normal !important;
  }

  /* Slightly denser typography on mobile so more fits without breaking layout */
  body[data-page="dashboard"],
  body[data-page="inventory"],
  body[data-page="expenses"],
  body[data-page="analytics"] {
    font-size: 14px;
  }

  /* Ensure main content isn't hidden behind the fixed mobile menu button */
  body[data-page="dashboard"] main,
  body[data-page="inventory"] main,
  body[data-page="expenses"] main,
  body[data-page="analytics"] main {
    padding: 1rem !important;
    padding-top: 4.5rem !important;
  }

  /* =========================
     DASHBOARD
     ========================= */
  /* Removed scale transform - using global zoom instead */

  body[data-page="dashboard"] #activityFeed {
    overflow-x: hidden !important;
  }
  body[data-page="dashboard"] #activityFeed .js-activity {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  /* Avoid nested scrolling inside Activity on mobile; use normal page scroll */
  body[data-page="dashboard"] #activityFeed {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  /* Make activity cards more compact on mobile */
  body[data-page="dashboard"] #activityFeed .js-activity {
    padding: 0.6rem !important;
  }
  body[data-page="dashboard"] #activityFeed .js-activity .js-activity-changes {
    display: none !important; /* diffs are great on desktop; too tall for mobile */
  }

  /* Hide low-signal chips/subtitles in activity cards on mobile to reduce scrolling */
  body[data-page="dashboard"] #activityFeed .js-activity p.text-\[10px\] {
    display: none !important;
  }
  body[data-page="dashboard"] #activityFeed .js-activity .mt-3.flex.flex-wrap {
    display: none !important;
  }

  body[data-page="dashboard"] .grid.grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  body[data-page="dashboard"] .grid.grid-cols-12 > [class*="col-span-"] {
    grid-column: auto / span 1 !important;
  }

  /* Tighten the chart header layout so it doesn't overflow */
  body[data-page="dashboard"] #profitChartCardHeader {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  body[data-page="dashboard"] #profitChartCardHeader .period-toggle {
    width: 100% !important;
    justify-content: space-between !important;
  }

  body[data-page="dashboard"] #profitChartCardHeader .period-toggle button {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Chart: keep it readable on small screens */
  body[data-page="dashboard"] #profitChartWrap {
    height: 240px !important;
  }

  /* =========================
     INVENTORY
     ========================= */
  /* Controls bar: stack everything so "Add Item" doesn't force sideways scrolling */
  body[data-page="inventory"] .inventory-controls-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  body[data-page="inventory"] .inventory-controls-left {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  body[data-page="inventory"] .inventory-controls-left > * {
    width: 100% !important;
  }

  body[data-page="inventory"] .inventory-add-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  body[data-page="inventory"] #inventoryStatsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  /* Make the search + filter controls stack cleanly */
  body[data-page="inventory"] .search-input {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="inventory"] .custom-select-trigger {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Inventory: mobile "card rows" with inline expand (matches screenshot) */
  body[data-page="inventory"] #inventoryListHeader {
    display: none !important;
  }

  body[data-page="inventory"] .inventory-row {
    display: block !important;
    padding: 1rem !important;
    margin: 0.75rem 0 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.02) !important;
    border-radius: 1.25rem !important;
  }
  
  /* Hide desktop table columns on mobile */
  body[data-page="inventory"] .inventory-row .inv-desktop-cols {
    display: none !important;
  }

  /* Collapsed: show ONLY photo + name + brand (this is inside .inv-mobile-summary) */
  body[data-page="inventory"] .inventory-row .inv-mobile-summary {
    display: block !important;
  }
  body[data-page="inventory"] .inventory-row .inv-col-check,
  body[data-page="inventory"] .inventory-row .inv-col-main,
  body[data-page="inventory"] .inventory-row .inv-col-specs,
  body[data-page="inventory"] .inventory-row .inv-col-financials,
  body[data-page="inventory"] .inventory-row .inv-col-dates,
  body[data-page="inventory"] .inventory-row .inv-col-status,
  body[data-page="inventory"] .inventory-row .inv-col-actions {
    display: none !important;
  }

  /* Expanded: reveal the existing row content */
  body[data-page="inventory"] .inventory-row.is-expanded .inv-col-check,
  body[data-page="inventory"] .inventory-row.is-expanded .inv-col-main,
  body[data-page="inventory"] .inventory-row.is-expanded .inv-col-specs,
  body[data-page="inventory"] .inventory-row.is-expanded .inv-col-financials,
  body[data-page="inventory"] .inventory-row.is-expanded .inv-col-dates,
  body[data-page="inventory"] .inventory-row.is-expanded .inv-col-status,
  body[data-page="inventory"] .inventory-row.is-expanded .inv-col-actions {
    display: block !important;
    width: 100% !important;
    margin-top: 0.75rem !important;
  }
  body[data-page="inventory"] .inventory-row.is-expanded .inv-col-main {
    display: flex !important;
  }
  body[data-page="inventory"] .inventory-row.is-expanded .inv-col-actions {
    display: flex !important;
    justify-content: flex-start !important;
  }

  /* Hide category path in main block when collapsed */
  body[data-page="inventory"] .inventory-row .inv-col-path { display: none !important; }
  body[data-page="inventory"] .inventory-row.is-expanded .inv-col-path { display: flex !important; }

  /* Hide checkboxes unless bulk mode is enabled */
  body[data-page="inventory"] .inventory-row .bulk-checkbox,
  body[data-page="inventory"] .inventory-row .bulk-checkbox-master {
    display: none !important;
  }
  body.bulk-mode[data-page="inventory"] .inventory-row .bulk-checkbox,
  body.bulk-mode[data-page="inventory"] .inventory-row .bulk-checkbox-master {
    display: inline-flex !important;
  }

  body.bulk-mode[data-page="inventory"] .inventory-row .inv-col-check { display: flex !important; }

  /* Keep image + title from overflowing */
  body[data-page="inventory"] .inventory-row .truncate {
    max-width: 100% !important;
  }

  /* Controls: force vertical layout (kill any remaining horizontal scrolling) */
  body[data-page="inventory"] .inventory-controls-left,
  body[data-page="inventory"] .inventory-controls-left > * {
    min-width: 0 !important;
  }
  body[data-page="inventory"] #filterValueWrap,
  body[data-page="inventory"] #filterValueSelect,
  body[data-page="inventory"] #filterCategoryBtn,
  body[data-page="inventory"] #pinnedFilterBtn {
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-page="inventory"] .custom-options {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* =========================
     EXPENSES (mobile accordion table)
     ========================= */
  body[data-page="expenses"] thead {
    display: none !important;
  }
  body[data-page="expenses"] .overflow-x-auto {
    overflow-x: visible !important; /* prevent sideways scroll on the expense table container */
  }
  body[data-page="expenses"] #expenseTableBody {
    display: block !important;
  }
  body[data-page="expenses"] tr.expense-row {
    display: block !important;
    padding: 1rem !important;
    margin: 0.75rem 0 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.02) !important;
    border-radius: 1.25rem !important;
    cursor: pointer;
  }
  body[data-page="expenses"] tr.expense-row td {
    display: block !important;
    padding: 0 !important;
  }
  /* In collapsed view, we show a custom summary inside the first cell */
  body[data-page="expenses"] tr.expense-row td:nth-child(2),
  body[data-page="expenses"] tr.expense-row td:nth-child(3),
  body[data-page="expenses"] tr.expense-row td:nth-child(4),
  body[data-page="expenses"] tr.expense-row td:nth-child(5) {
    display: none !important;
  }
  body[data-page="expenses"] .exp-mobile-summary {
    display: block !important;
  }
  /* Details row becomes a block card under the row when expanded */
  body[data-page="expenses"] tr.expense-details {
    display: block !important;
    margin: -0.25rem 0 0.75rem 0 !important;
  }
  body[data-page="expenses"] tr.expense-details td {
    display: block !important;
    padding: 0 !important;
  }
  body[data-page="expenses"] tr.expense-details.hidden {
    display: none !important;
  }
  /* Hide hover-only action strip on mobile; actions are inside expanded details */
  body[data-page="expenses"] .expense-actions {
    display: none !important;
  }

  /* =========================
     ANALYTICS (stop squashing/overflow on mobile)
     ========================= */
  /* Removed scale transform - using global zoom instead */
  body[data-page="analytics"] h2.text-3xl {
    font-size: 1.6rem !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body[data-page="analytics"] .profit-heatmap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  body[data-page="analytics"] .profit-heatmap-cell {
    padding: 0.75rem !important;
  }
  body[data-page="analytics"] .profit-heatmap-cell p.text-lg {
    font-size: 1rem !important;
  }
  /* Age heatmap: prevent huge horizontal overflow on mobile */
  body[data-page="analytics"] #ageHeatmapContainer {
    overflow-x: hidden !important;
  }
  body[data-page="analytics"] #ageHeatmap {
    /* Removed scale - using global zoom instead */
    width: 100% !important;
  }
}

/* DESKTOP OVERRIDES: Ensure desktop grid view is preserved */
@media (min-width: 769px) {
  /* Reset zoom on desktop */
  html {
    zoom: 1 !important;
  }
  
  /* Ensure inventory shows as grid on desktop, not mobile cards */
  body[data-page="inventory"] #inventoryListHeader {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  
  body[data-page="inventory"] .inventory-row {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    padding: 1rem !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-left: none !important;
  }
  
  /* Hide mobile summary on desktop */
  body[data-page="inventory"] .inventory-row .inv-mobile-summary {
    display: none !important;
  }
  
  /* Hide mobile details on desktop */
  body[data-page="inventory"] .inventory-row .inv-mobile-details {
    display: none !important;
  }
  
  /* Show all desktop grid columns - but exclude mobile elements and main column */
  body[data-page="inventory"] .inventory-row > div:not(.inv-mobile-summary):not(.inv-mobile-details):not(.inv-col-main):not(.inv-col-check):not(.inv-col-actions) {
    display: block !important;
  }
  
  /* Ensure desktop columns are visible */
  body[data-page="inventory"] .inventory-row .inv-col-check {
    display: flex !important;
  }
  
  /* Main column needs flex to keep photo on left, text on right - MUST come after general rule */
  body[data-page="inventory"] .inventory-row .inv-col-main {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  
  body[data-page="inventory"] .inventory-row .inv-col-specs,
  body[data-page="inventory"] .inventory-row .inv-col-financials,
  body[data-page="inventory"] .inventory-row .inv-col-dates,
  body[data-page="inventory"] .inventory-row .inv-col-status {
    display: block !important;
  }
  
  body[data-page="inventory"] .inventory-row .inv-col-actions {
    display: flex !important;
    justify-content: flex-end !important;
  }
  
  body[data-page="inventory"] .inventory-row .inv-desktop-cols {
    display: block !important;
  }
  
  body[data-page="inventory"] .inventory-row .inv-col-path {
    display: flex !important;
  }
}