/* ════════════════════════════════════════════════════════════════
   DUNN — MOBILE NATIVE LAYER
   Loaded after each page's inline styles. Transforms the app on
   small screens into a native-feel experience: frosted bottom tab
   bar, card lists instead of squeezed tables, bottom-sheet panels,
   44pt touch targets, safe-area support.
   Desktop (≥769px) is untouched.
   ════════════════════════════════════════════════════════════════ */

/* Components injected by dunn-mobile.js are hidden on desktop */
@media (min-width: 769px) {
  .m-tabbar, .m-fab, .m-sheet, .m-sheet-overlay { display: none !important; }
}

@media (max-width: 768px) {

  /* ── Base feel ──────────────────────────────────────────────── */
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  body {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
    background: var(--ink-7, #F6F6FC);
  }
  * { -webkit-touch-callout: none; }
  input, textarea { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; }

  /* Inputs at 16px so iOS never auto-zooms on focus */
  input, select, textarea {
    font-size: 16px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
    max-width: 100%;
  }
  input[type="checkbox"], input[type="radio"] { border-radius: 4px !important; }

  /* Buttons: comfortable touch targets + press feedback */
  .btn-primary, .btn-secondary, .filter-tab, .topbar-icon-btn {
    min-height: 42px;
    transition: transform .12s ease, opacity .12s ease, background .12s ease;
  }
  .btn-primary:active, .btn-secondary:active, .m-fab:active,
  .filter-tab:active, .m-tab:active, .m-sheet-item:active {
    transform: scale(.96);
  }

  /* ── Kill the drawer pattern — the tab bar replaces it ──────── */
  .sidebar, .sidebar-overlay, .hamburger { display: none !important; }
  .main {
    margin-left: 0 !important; width: 100%;
    display: block !important; height: auto !important; min-height: 100dvh;
  }
  /* The document is the single scroller on mobile — undo desktop's
     fixed-height inner scroll area, which collapses without a flex parent */
  .content {
    height: auto !important; min-height: 0 !important;
    overflow: visible !important; flex: none !important;
  }

  /* ── Topbar: iOS-style frosted sticky header ────────────────── */
  .topbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.82) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: .5px solid rgba(12,11,26,.10) !important;
    padding: 0 16px !important;
    padding-top: env(safe-area-inset-top);
    min-height: 56px;
  }
  .topbar-title { font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.4px; }
  .topbar-sub { display: none !important; }
  .topbar-right .btn-primary { display: none !important; } /* replaced by FAB */
  .topbar-right .search-bar { display: none !important; }

  /* ── Content area: breathing room (tab-bar clearance is on .main) ─ */
  .content { padding: 16px !important; }

  /* ── Stats: horizontally scrolling snap strip (native pattern) ─ */
  .stats-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0 -16px 4px;
    padding: 2px 16px 10px;
    scrollbar-width: none;
  }
  .stats-grid::-webkit-scrollbar { display: none; }
  .stats-grid > * {
    flex: 0 0 46%;
    min-width: 150px;
    scroll-snap-align: start;
    border-radius: 16px !important;
  }
  .stat-val { font-size: 22px !important; }

  /* ── Panels: card language ──────────────────────────────────── */
  .panel { border-radius: 16px !important; overflow: hidden; }
  .main-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Pages built on inline-styled sidebar grids (1fr + fixed px column)
     collapse to a single column so nothing overflows the viewport.
     Scoped to .main because some pages place panels outside .content. */
  .main div[style*="grid-template-columns:1fr 3"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .main div[style*="grid-template-columns:1fr 3"] > * { min-width: 0; }
  .content > div[style*="grid-template-columns:1fr 1fr;"],
  .main > div[style*="grid-template-columns:1fr 1fr;"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* 3-up plan/stat grids → 1-up */
  .main div[style*="repeat(3,1fr)"],
  .main div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .clients-stats-grid { grid-template-columns: 1fr 1fr !important; }

  /* Panels orphaned outside .content still get gutters + tab-bar clearance */
  .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .main > .panel, .main > div[style*="display:grid"] { margin-left: 16px; margin-right: 16px; }

  /* Billing history rows → two-line cards */
  .invoice-hist-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 10px !important; padding: 13px 16px !important;
  }
  .invoice-hist-row[style*="background"] { display: none !important; } /* its header */

  /* Column-label header rows make no sense in card layout */
  .table-header { display: none !important; }

  /* ── Filter tabs: bigger, scrollable, thumb-friendly ────────── */
  .filter-tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; padding: 12px 14px !important; gap: 6px !important;
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab {
    font-size: 13.5px !important; padding: 8px 16px !important;
    min-height: 38px; border-radius: 100px !important;
    background: var(--ink-6);
  }
  .filter-tab.active { background: var(--ink) !important; color: #fff !important; }

  /* ── Invoice rows → cards ───────────────────────────────────── */
  /* JS-rendered child order: 1 client · 2 amount · 3 due · 4 pill · 5 actions */
  .table-row.inv-grid {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "client amount"
      "pill   due"
      "act    act" !important;
    gap: 8px 12px !important;
    padding: 14px 16px !important;
    align-items: center;
    transition: background .15s ease;
  }
  .table-row.inv-grid:active { background: var(--ink-6); }
  .table-row.inv-grid > div:nth-child(1) { grid-area: client; display: flex !important; min-width: 0; }
  .table-row.inv-grid > div:nth-child(1) > div:last-child { min-width: 0; }
  .table-row.inv-grid > div:nth-child(1) [style*="font-size:13.5px"] {
    font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .table-row.inv-grid > .amount-val:nth-child(2) {
    grid-area: amount; justify-self: end;
    font-size: 15.5px !important; font-weight: 800 !important;
    display: block !important;
  }
  .table-row.inv-grid > div:nth-child(3) {
    grid-area: due; justify-self: end;
    display: block !important; font-size: 12px !important; color: var(--ink-4) !important;
  }
  .table-row.inv-grid > .pill:nth-child(4) {
    grid-area: pill; justify-self: start;
    display: inline-flex !important;
  }
  .table-row.inv-grid > div:nth-child(5) { grid-area: act; }
  .table-row.inv-grid > div:nth-child(5) button {
    min-height: 38px; padding: 8px 14px !important; font-size: 13px !important;
    border-radius: 10px !important;
  }
  /* Paid/draft rows render an empty actions container — drop the row */
  .table-row.inv-grid > div:nth-child(5):not(:has(button)) { display: none !important; }
  .inv-avatar { width: 38px !important; height: 38px !important; font-size: 13px !important; }

  /* Invoice page: single column, detail lives in the slide-over */
  .inv-two-col { display: block !important; }
  #detail-panel, #detail-empty { display: none !important; }

  /* ── Dashboard "Recent invoices" rows → cards ───────────────── */
  /* Child order: 1 client · 2 amount · 3 due · 4 reminders · 5 pill */
  .inv-row.header { display: none !important; }
  .inv-row[data-status] {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "client amount"
      "pill   due" !important;
    gap: 8px 12px !important;
    padding: 14px 16px !important;
  }
  .inv-row[data-status]:active { background: var(--ink-6); }
  .inv-row[data-status] > div:nth-child(1) { grid-area: client; min-width: 0; }
  .inv-row[data-status] .inv-row-name { font-size: 15px !important; }
  .inv-row[data-status] > .inv-row-amount { grid-area: amount; justify-self: end; font-size: 15px !important; font-weight: 800 !important; }
  .inv-row[data-status] > .inv-row-due { grid-area: due; justify-self: end; font-size: 12px !important; color: var(--ink-4) !important; }
  .inv-row[data-status] > .inv-row-rem { display: none !important; }
  .inv-row[data-status] > .pill { grid-area: pill; justify-self: start; }

  /* ── Overdue alert banner: stacked, full-width actions ──────── */
  .alert-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    border-radius: 16px !important;
    padding: 16px !important;
  }
  .alert-banner-icon { display: none !important; }
  .alert-banner-text { font-size: 14px !important; line-height: 1.55; }
  .alert-banner-actions { width: 100%; }
  .alert-banner-actions > * { flex: 1; min-height: 42px; text-align: center; justify-content: center; }

  /* ── Client rows → cards ────────────────────────────────────── */
  /* Child order: 1 client · 2 billed · 3 outstanding · 4 status · 5 view btn */
  .table-row.client-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "client client"
      "billed outstanding" !important;
    gap: 10px 12px !important;
    padding: 14px 16px !important;
  }
  .table-row.client-grid:active { background: var(--ink-6); }
  .table-row.client-grid > div:nth-child(1) { grid-area: client; display: flex !important; min-width: 0; position: relative; }
  .table-row.client-grid > div:nth-child(1) [style*="font-size:13.5px"] { font-size: 15px !important; }
  .table-row.client-grid > .stat-mini:nth-child(2) {
    grid-area: billed; display: block !important;
    background: var(--ink-7); border-radius: 12px; padding: 10px 12px;
  }
  .table-row.client-grid > .stat-mini:nth-child(3) {
    grid-area: outstanding; display: block !important;
    background: var(--ink-7); border-radius: 12px; padding: 10px 12px;
  }
  .table-row.client-grid > .stat-mini .stat-mini-val { font-size: 15px !important; font-weight: 800; }
  .table-row.client-grid > .stat-mini { text-align: left !important; }
  .table-row.client-grid > .stat-mini * { text-align: left !important; }
  /* Status text rides inside the client line; chevron affordance instead of View */
  .table-row.client-grid > div:nth-child(4) {
    grid-area: client; display: flex !important; align-items: center;
    justify-self: end; align-self: center; padding-right: 14px;
  }
  .table-row.client-grid > div:nth-child(4) span[style*="font-size:12.5px"] { display: none !important; }
  .table-row.client-grid > button:nth-child(5) { display: none !important; }
  .table-row.client-grid::after {
    content: ''; position: absolute; /* chevron */
  }
  .table-row.client-grid { position: relative; }
  .table-row.client-grid > div:nth-child(1)::after {
    content: ''; width: 8px; height: 8px; flex: 0 0 auto;
    border-right: 2px solid var(--ink-5); border-top: 2px solid var(--ink-5);
    transform: rotate(45deg); margin-left: auto; align-self: center;
  }
  .client-avatar { width: 40px !important; height: 40px !important; }

  /* ── Reminders activity log → two-line cards ────────────────── */
  .log-row {
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "who status" "type channel" !important;
    gap: 6px 10px !important; padding: 13px 16px !important;
  }
  .log-row > div:nth-child(1) { grid-area: who; }
  .log-row > div:nth-child(2) { grid-area: type; }
  .log-row > .channel-badge { grid-area: channel; justify-self: end; }
  .log-row > .tag { grid-area: status; justify-self: end; }
  .log-row[style*="background"] { display: none !important; } /* its header row */

  /* ── Recovery stack rows ────────────────────────────────────── */
  .recovery-row {
    grid-template-columns: 1fr auto !important;
    gap: 6px 10px !important; padding: 13px 16px !important;
  }

  /* ── Slide-overs → bottom sheets ────────────────────────────── */
  .slide-over {
    top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: 100% !important;
    height: 92dvh; max-height: 92dvh;
    border-left: none !important;
    border-radius: 22px 22px 0 0 !important;
    transform: translateY(100%) !important;
    transition: transform .34s cubic-bezier(.32,.72,0,1) !important;
    box-shadow: 0 -12px 48px rgba(12,11,26,.22) !important;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 500 !important;
  }
  .slide-overlay { z-index: 499 !important; }
  .slide-over.open { transform: translateY(0) !important; }
  .slide-over::before {
    content: ''; position: absolute; top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 5px; border-radius: 100px;
    background: var(--ink-5); z-index: 5;
  }

  /* Line items inside the new-invoice sheet: stacked mini-cards */
  .slide-over div[style*="1fr 80px 100px"] { display: none !important; } /* column-label header */
  .slide-over .line-item-row {
    display: grid !important;
    grid-template-columns: 64px 1fr 1fr 36px !important;
    gap: 8px !important; align-items: center;
  }
  .slide-over .line-item-row > *:first-child { grid-column: 1 / -1; }
  .slide-over .line-item-row > .line-item-nums { grid-column: 1 / -1; }

  /* Belt-and-braces: nothing scrolls sideways */
  body { overflow-x: hidden; }

  /* Settings layout single-column */
  .settings-layout { grid-template-columns: 1fr !important; }
  .settings-nav { position: static !important; margin-bottom: 16px; }

  /* Quick actions */
  .quick-actions { grid-template-columns: 1fr 1fr !important; }
  .quick-actions > * { min-height: 48px; border-radius: 12px !important; }

  /* Toast clears the tab bar */
  .toast { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }

  /* Cookie banner: stacked card above the tab bar */
  #cookie-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: calc(100% - 20px) !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }
  #cookie-banner > div:first-child { display: none !important; } /* icon */
  #cookie-banner > div:last-child { display: flex !important; }
  #cookie-banner > div:last-child button { flex: 1; min-height: 44px; border-radius: 12px !important; }

  /* Auth pages: focused single column */
  .left { display: none !important; }
  .right { padding: 40px 22px !important; min-height: 100dvh; }

  /* ════════════════════════════════════════════════════════════
     COMPONENTS INJECTED BY dunn-mobile.js
     ════════════════════════════════════════════════════════════ */

  /* ── Bottom tab bar ─────────────────────────────────────────── */
  .m-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
    display: flex; align-items: stretch;
    background: rgba(255,255,255,.84);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-top: .5px solid rgba(12,11,26,.12);
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(58px + env(safe-area-inset-bottom));
  }
  .m-tab {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    text-decoration: none; color: var(--ink-4);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: .1px;
    position: relative; padding-top: 4px;
    transition: color .15s ease, transform .12s ease;
    border: none; background: none; cursor: pointer;
  }
  .m-tab svg { width: 23px; height: 23px; }
  .m-tab.active { color: var(--brand); }
  .m-tab-badge {
    position: absolute; top: 3px; left: calc(50% + 5px);
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 100px; background: var(--error, #EF4444);
    color: #fff; font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
  }
  .m-tab-badge.amber { background: #f59e0b; }
  .m-tab-badge[hidden] { display: none; }

  /* ── Floating action button ─────────────────────────────────── */
  .m-fab {
    position: fixed; right: 16px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    z-index: 390;
    width: 56px; height: 56px; border-radius: 18px;
    background: linear-gradient(145deg, var(--brand-light, #4A44E0), var(--brand, #3730C9));
    color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(55,48,201,.38), 0 2px 6px rgba(55,48,201,.25);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .m-fab svg { width: 22px; height: 22px; }

  /* ── "More" bottom sheet ────────────────────────────────────── */
  .m-sheet-overlay {
    position: fixed; inset: 0; z-index: 440;
    background: rgba(12,11,26,.42);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .m-sheet-overlay.open { opacity: 1; pointer-events: all; }
  .m-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 450;
    background: #fff; border-radius: 22px 22px 0 0;
    transform: translateY(105%);
    transition: transform .34s cubic-bezier(.32,.72,0,1);
    padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 48px rgba(12,11,26,.22);
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
  .m-sheet.open { transform: translateY(0); }
  .m-sheet-grab {
    width: 36px; height: 5px; border-radius: 100px;
    background: var(--ink-5); margin: 2px auto 14px;
  }
  .m-sheet-user {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 12px 16px; border-bottom: 1px solid var(--ink-6);
    margin-bottom: 8px;
  }
  .m-sheet-avatar {
    width: 42px; height: 42px; border-radius: 13px;
    background: var(--brand-soft); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
  }
  .m-sheet-user-name { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
  .m-sheet-user-plan { font-size: 12px; color: var(--ink-4); font-weight: 600; }
  .m-sheet-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 12px; border-radius: 14px;
    text-decoration: none; color: var(--ink-2);
    font-size: 15px; font-weight: 700; letter-spacing: -.2px;
    border: none; background: none; width: 100%; cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif; text-align: left;
    transition: background .12s ease, transform .12s ease;
  }
  .m-sheet-item:active { background: var(--ink-6); }
  .m-sheet-item.active { background: var(--brand-soft); color: var(--brand); }
  .m-sheet-item svg { width: 19px; height: 19px; flex: 0 0 auto; }
  .m-sheet-item.danger { color: var(--error, #EF4444); }
  .m-sheet-divider { height: 1px; background: var(--ink-6); margin: 8px 12px; }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .slide-over, .m-sheet, .m-sheet-overlay, .m-tab, .btn-primary, .btn-secondary, .m-fab {
      transition: none !important;
    }
  }
}

/* ── Protect line item layout on desktop ── */
@media (min-width: 769px) {
  .li-row { display: grid !important; grid-template-columns: 80px 1fr 1fr 36px !important; gap: 8px !important; align-items: end !important; }
  .li-card { display: block !important; }
  .li-desc { display: block !important; width: 100% !important; margin-bottom: 8px !important; }
}