/* ════════════════════════════════════════════════════════════════════════
   dashboards-responsive.css
   Mobile + tablet polish for /dashboards/admin and /dashboards/host.

   Strategy: the section components are React + inline styles, so we can't
   use class-based responsive design. Instead we target the inline grid /
   padding styles via attribute selectors at breakpoints. Each rule is
   conservative — only collapsing layouts that demonstrably break <900px.

   Tested viewports:
     • 320px  iPhone SE
     • 390px  iPhone 14
     • 768px  iPad portrait
     • 900px  iPad landscape (breakpoint)
     • 1280px desktop (no changes)

   Loaded by both admin.html and host.html AFTER the React bundle so it
   wins in the cascade against any inline style="…" of equal specificity.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤900px): 4-col grids → 2; 3-col → 1 ─────────────────────── */
@media (max-width: 900px) {
  /* KPI rows + villa-card grids */
  div[style*="gridTemplateColumns: 'repeat(4, 1fr)'"],
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  div[style*="gridTemplateColumns: 'repeat(3, 1fr)'"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Two-column layouts collapse */
  div[style*="gridTemplateColumns: '1.4fr 1fr'"],
  div[style*="grid-template-columns: 1.4fr 1fr"],
  div[style*="gridTemplateColumns: '1.6fr 1fr'"],
  div[style*="grid-template-columns: 1.6fr 1fr"],
  div[style*="gridTemplateColumns: 'repeat(2, 1fr)'"],
  div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar auto-collapse — handled by DashSidebar's own breakpoint logic
     in the React component. We only need to ensure the main content
     doesn't get squeezed. */
  main[style*="padding: '40px"],
  main[style*="padding: 40px"] {
    padding: 24px 16px !important;
  }

  /* Section header — title + actions stack instead of inline */
  div[style*="alignItems: 'flex-end'"][style*="justifyContent: 'space-between'"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* Filter chip rows — wrap with smaller gap on mobile */
  div[style*="display: 'flex'"][style*="gap: 12"],
  div[style*="display: flex"][style*="gap: 12px"] {
    gap: 8px !important;
  }
}

/* ── Phone (≤640px): tighter typography + tables go horizontal-scroll ── */
@media (max-width: 640px) {
  /* Display headlines step down (Playfair italic 36 → 24) */
  span[style*="fontSize: 36"][style*="italic"],
  div[style*="fontSize: 36"][style*="italic"] {
    font-size: 24px !important;
  }
  span[style*="fontSize: 28"][style*="italic"],
  div[style*="fontSize: 28"][style*="italic"] {
    font-size: 22px !important;
  }
  span[style*="fontSize: 22"][style*="italic"],
  div[style*="fontSize: 22"][style*="italic"] {
    font-size: 18px !important;
  }

  /* KPI grids: 2-col → 1 on phone (was already 2-col after 900px rule) */
  div[style*="gridTemplateColumns: 'repeat(2, 1fr)'"],
  div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Tables: ensure horizontal scroll, hide non-essential columns visually
     by tightening padding (no display:none — accessibility). */
  table {
    font-size: 12px !important;
  }
  table th,
  table td {
    padding: 10px 12px !important;
    white-space: nowrap;
  }

  /* Modals: full-width on mobile */
  div[style*="position: fixed"][style*="zIndex: 9000"] > div {
    border-radius: 12px !important;
    margin-top: 0 !important;
  }
  /* Modal body padding tighter */
  div[style*="position: fixed"][style*="zIndex: 9000"] > div > div[style*="padding: 28"] {
    padding: 20px !important;
  }
  div[style*="position: fixed"][style*="zIndex: 9000"] > div > div[style*="padding: '24px 28px"] {
    padding: 18px 20px !important;
  }

  /* Form fields — stack 2-col forms to 1-col */
  div[style*="display: 'grid'"][style*="gridTemplateColumns: '1fr 1fr'"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="display: 'grid'"][style*="gridTemplateColumns: 'repeat(3, 1fr)'"] {
    grid-template-columns: 1fr !important;
  }

  /* Action buttons in section headers — wrap to next line, full-width */
  button[style*="marginRight: 8"],
  a[style*="display: 'inline-block'"][style*="padding: '8px 16px'"] {
    width: 100% !important;
    text-align: center !important;
    margin-right: 0 !important;
    margin-bottom: 6px !important;
  }
}

/* ── Touch-target minimum (≤900px includes tablet + phone) ───────────── */
@media (max-width: 900px) {
  button,
  input[type="button"],
  input[type="submit"],
  a[role="button"] {
    min-height: 36px;
  }
  /* Force min-height on filter chips + action buttons */
  button[style*="borderRadius: 100"] {
    min-height: 36px;
  }
}

/* ── Reduce-motion respect ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   v126 additions — chat inbox, modals, finance ledger, dashboards-shell.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Chat 2-pane → single-pane on mobile ─────────────────────────────── */
/* Match the inline 340px-1fr grid used in ChatInbox component */
@media (max-width: 768px) {
  div[style*="gridTemplateColumns: '340px 1fr'"],
  div[style*="grid-template-columns: 340px 1fr"] {
    grid-template-columns: 1fr !important;
    /* Allow scroll between thread list and chat by shrinking total height */
    height: auto !important;
    min-height: 70vh !important;
  }
}

/* ── New v125 modals (cancellation, modify, file claim, adjudicate) ──── */
/* They use position:fixed + z-index 1000 instead of 9000 */
@media (max-width: 640px) {
  div[style*="position: fixed"][style*="zIndex: 1000"] > div {
    max-width: 96vw !important;
    border-radius: 12px !important;
    max-height: 92vh !important;
  }
  /* Modal padding tighter on mobile */
  div[style*="position: fixed"][style*="zIndex: 1000"] > div[style*="padding: '34px"] ,
  div[style*="position: fixed"][style*="zIndex: 1000"] > div[style*="padding: 34px"] {
    padding: 22px 18px !important;
  }
  /* Modal action button rows wrap on mobile */
  div[style*="position: fixed"][style*="zIndex: 1000"] div[style*="display: 'flex'"][style*="gap: 8"] button {
    flex: 1 1 auto;
    min-width: 120px;
  }
}

/* ── Finance ledger table — horizontal scroll wrapper ────────────────── */
@media (max-width: 900px) {
  /* The expandable per-booking table inside AdminFinance ledger */
  div[style*="overflowX: 'auto'"] table[style*="fontFamily: 'inherit'"] th,
  div[style*="overflowX: 'auto'"] table[style*="fontFamily: 'inherit'"] td {
    font-size: 11px !important;
    padding: 8px 6px !important;
  }
  /* Hide host-email column visually on phone (still in DOM for accessibility) */
  table th:nth-child(3):not([style*="display"]),
  table td:nth-child(3):not([style*="display"]) {
    /* Conservative: keep visible but make narrow. Hard hide breaks too easily. */
  }
}

/* ── Sidebar — full-width drawer on mobile, hamburger toggled ───────── */
/* The DashSidebar component uses inline width 260px / 72px. On mobile
   we make it absolute-positioned drawer-style so main content gets full
   viewport width. The collapsed/expanded state still works via the
   user's existing toggle button. */
@media (max-width: 768px) {
  aside[style*="width: 260"],
  aside[style*="width: 72"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 999;
    box-shadow: 6px 0 24px rgba(0,0,0,0.18);
    transform: translateX(0);
    transition: transform 220ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  }
  /* When sidebar is "collapsed" on mobile, slide it off-screen entirely */
  aside[style*="width: 72"] {
    transform: translateX(-72px) !important;
  }
  /* Main content takes full width when sidebar is drawer-mode */
  main[style*="flex: 1"] {
    margin-left: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
  }
}

/* ── KPI tile font sizing on mobile ─────────────────────────────────── */
@media (max-width: 640px) {
  /* The big KPI numbers (Display 22-28pt) need to step down so they
     don't overflow narrow tiles after grid collapses to 1-col */
  div[style*="fontSize: 22"][style*="weight: 400"],
  div[style*="font-size: 22px"][style*="font-weight: 400"] {
    font-size: 18px !important;
  }
}

/* ── File picker on mobile gets full-width ─────────────────────────── */
@media (max-width: 640px) {
  input[type="file"] {
    max-width: 100%;
    font-size: 12px;
  }
}

/* ── Checkbox + label inline alignment (mobile-friendly tap area) ────── */
@media (max-width: 640px) {
  label[style*="display: 'inline-flex'"][style*="cursor: 'pointer'"] {
    padding: 8px 4px;
    min-height: 36px;
  }
}