/* =====================================================================
 * DeductFlow — Mobile App Layer (styles)
 * ---------------------------------------------------------------------
 * Everything in this file is scoped to phones/small tablets (<=768px).
 * Desktop rendering is untouched: at >768px this stylesheet is inert.
 *
 * Design goals (see MOBILE-UX-AUDIT.md):
 *  - App-store feel: bottom tab bar, sheets, cards — not a shrunk website
 *  - Brand: Deep Navy (--ocean-deep) surfaces, Electric Teal accents
 *  - 44px minimum touch targets, safe-area aware, no clipped content
 * ===================================================================== */

/* Base state OUTSIDE the phone breakpoint: the mobile chrome may exist in
 * the DOM (built when the viewport passed through <=768px — DevTools
 * toggle, tablet rotation, window resize) but must never render at
 * desktop widths. Everything below the media query re-enables it. */
#dfTabBar, #dfMoreSheet { display: none; }

@media (max-width: 768px) {

  /* ---------- 0. Layout guardrails ------------------------------- */
  /* Content must clear the fixed tab bar (64px + safe area). */
  body.df-mobile .page {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Kill any residual horizontal creep at the page level. */
  body.df-mobile .main-content,
  body.df-mobile .page { max-width: 100vw; overflow-x: hidden; }

  /* ---------- 1. Bottom tab bar ----------------------------------- */
  #dfTabBar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    display: flex;
    align-items: stretch;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: linear-gradient(180deg, rgba(13, 25, 38, 0.92), rgba(7, 19, 31, 0.98));
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top: 1px solid rgba(24, 213, 215, 0.14);
  }
  .df-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    background: none;
    border: none;
    color: var(--text-muted, #8CA3B8);
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
  }
  .df-tab svg { width: 22px; height: 22px; }
  .df-tab.active { color: var(--teal-primary, #18D5D7); }
  .df-tab.active svg { filter: drop-shadow(0 0 6px rgba(24, 213, 215, 0.55)); }

  /* Center capture button: raised, brand teal, unmistakably primary. */
  .df-tab-capture {
    flex: 0 0 76px;
    position: relative;
  }
  .df-tab-capture .df-capture-circle {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--teal-primary, #18D5D7), var(--teal-dark, #0E9A9C));
    color: #04222b;
    box-shadow: 0 6px 18px rgba(24, 213, 215, 0.45), 0 2px 6px rgba(0,0,0,0.4);
    border: 3px solid rgba(7, 19, 31, 0.9);
  }
  .df-tab-capture .df-capture-circle svg { width: 26px; height: 26px; }
  .df-tab-capture span {
    position: absolute; bottom: 7px; left: 0; right: 0;
    text-align: center;
    font-size: 0.66rem; font-weight: 600;
    color: var(--text-muted, #8CA3B8);
  }

  /* Replace the old 3-button action bar (clipped + FAB collision). */
  body.df-mobile .mobile-action-bar { display: none !important; }

  /* Help & feedback widget: full-screen takeover on phones. As a desktop
   * popover it floated mid-screen with the page (and the feedback modal)
   * bleeding through around it — three stacked layers of UI. */
  body.df-mobile #dfWidget,
  body.df-mobile #dfWidget .df-widget-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    z-index: 960 !important;   /* above tab bar (900), FAB (890), pill (880) */
  }
  body.df-mobile #dfWidget .df-widget-panel {
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.df-mobile #dfWidget .df-widget-tab {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Feedback form: it uses .feedback-modal (not .modal), so it missed the
   * bottom-sheet treatment. Same sheet pattern, above the widget. */
  body.df-mobile .feedback-modal { align-items: flex-end !important; z-index: 1001; }
  body.df-mobile .feedback-modal .feedback-content {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92dvh;
    overflow-y: auto;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    animation: dfSheetUp 0.22s ease-out;
  }
  body.df-mobile .feedback-modal .feedback-content::before {
    content: "";
    display: block;
    width: 40px; height: 4px;
    margin: 2px auto 10px;
    border-radius: 2px;
    background: rgba(140, 163, 184, 0.35);
  }
  /* Roomier question box — people write questions here, not just votes. */
  body.df-mobile #feedbackText { min-height: 140px; font-size: 16px; }

  /* Feedback pill leaves room for the FAB instead of sliding under it. */
  body.df-mobile .fb-pill { right: 84px !important; left: 12px !important; width: auto !important; }

  /* Floating helpers ride ABOVE the tab bar instead of fighting it.
   * (#dfWidgetFab = help widget on app.html; #df-chat-toggle = marketing
   * chat, kept for safety in case it's ever added to the app shell.) */
  body.df-mobile #dfWidgetFab,
  body.df-mobile #df-chat-toggle {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    z-index: 890 !important;
  }
  body.df-mobile #df-chat-panel {
    bottom: calc(144px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 160px - env(safe-area-inset-bottom, 0px)) !important;
  }
  /* (#dfWidget is a FULL-SCREEN takeover on phones — rules further up.
   * Late-cascade reinforcement so no lift/offset rule can shrink it.) */
  body.df-mobile #dfWidget {
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
  }
  /* Feedback pill + ACTIVE bulk-selection bars dock above the tab bar.
   * (.bulk-action-bar hides at bottom:-80px when idle — leave that alone.) */
  body.df-mobile .fb-pill,
  body.df-mobile .bulk-action-bar.active {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 880 !important;
  }
  /* First-run wizard: bring its controls up to touch size. */
  body.df-mobile .fw-close { min-width: 44px; min-height: 44px; }
  body.df-mobile .fw-pills button { min-height: 44px; padding: 8px 16px; }
  body.df-mobile .fw-skip { min-height: 44px; padding: 10px 16px; }
  body.df-mobile .fw-cta { min-height: 48px; }
  body.df-mobile .fw-card { max-width: calc(100vw - 24px); }

  /* Property costs: "The Big 3" suffix crowds the centered title on
   * phones (reads as "Property CostsTheBig3"). The pill chip right below
   * already says Mortgage • Taxes • Insurance — drop the suffix. */
  body.df-mobile #page-propertycosts h1 span { display: none; }

  /* Reports: the export-scope select was a bare native control. Dress it
   * like the rest of the app and give it the full row. */
  body.df-mobile .export-scope-select {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--ocean-mid, #1A212B);
    border: 1px solid rgba(140, 163, 184, 0.18);
    color: var(--text-primary, #E8F1F8);
    font-family: inherit;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238CA3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }

  /* Stat grids: consistent 2-up on phones everywhere (income page stacked
   * 1-up while dashboard/overview were 2-up — jarring, wasted space). */
  body.df-mobile .stats-grid,
  body.df-mobile .stats-grid-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }

  /* Stat cards: labels wrap between words; money values NEVER break
   * mid-number — they shrink instead. (overflow-wrap:anywhere produced
   * "$315,\n000.\n00" — worse than clipping.) */
  body.df-mobile .stat-card,
  body.df-mobile [class*="stat-"] { min-width: 0; }
  body.df-mobile .stat-card .stat-label {
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
  body.df-mobile .stat-card .stat-value {
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
  }

  /* ---------- 2. Compact app header (fixes S1 overflow) ----------- */
  body.df-mobile .page-header {
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
  }
  /* Stack the header: page title on its own row, entity selector as a
   * full-width row beneath it (long entity names get the whole width). */
  body.df-mobile .page-header-left {
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  body.df-mobile .page-header h1 {
    font-size: 1.35rem;
    line-height: 1.2;
    min-width: 0;
    text-align: center;   /* app-style centered page title */
  }
  /* The top app bar already carries the brand; don't repeat the wordmark
   * in every page title on a 375px screen. Just the page name. */
  body.df-mobile .page-header h1::before {
    content: "";
    margin-right: 0;
    padding-left: 1.6em;   /* keep the teal mark as an app-like page glyph */
  }
  /* Entity pill: full-width row under the title; long names ellipsize
   * only when they exceed the whole row. */
  body.df-mobile .entity-header-pill {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    overflow: hidden;
    justify-content: flex-start;
  }
  body.df-mobile .entity-header-pill .ehp-text {
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
  }
  body.df-mobile .entity-header-pill .ehp-name {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.df-mobile .header-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  body.df-mobile .header-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Active hours: Log hours is the primary, full-width, first.
   * Export/Import fall to a secondary row beneath it. */
  body.df-mobile #dfLogHoursBtn { flex: 1 1 100%; order: -1; }
  body.df-mobile #page-time .header-actions .export-dropdown,
  body.df-mobile #page-time .header-actions #importTimeBtn { order: 2; }
  body.df-mobile #page-time .header-actions .export-dropdown { flex: 1 1 40%; }
  body.df-mobile #page-time .header-actions .export-dropdown .btn { width: 100%; }

  /* ---------- 3. Touch targets (fixes S3) ------------------------- */
  body.df-mobile .btn,
  body.df-mobile .mobile-action-btn,
  body.df-mobile .page .btn-primary,
  body.df-mobile .page .btn-secondary {
    min-height: 44px;
  }
  /* Year chips: compact on phones — quiet segmented control, not buttons.
   * (Still a 36px tap zone; visually much lighter than the action row.) */
  body.df-mobile .year-toggle {
    display: inline-flex;
    align-self: center;   /* centered under the title, app-style */
    gap: 2px;
  }
  body.df-mobile button.year-btn {
    min-height: 32px;
    padding: 4px 12px;
    font-size: 0.78rem;
  }

  /* Redundant with the tab bar's Capture button and the pages' own flows:
   * hide scan/add shortcuts from mobile headers to calm the top of page.
   * (display:none keeps programmatic .click() working for the Capture tab.) */
  body.df-mobile #snapReceiptBtn,
  body.df-mobile #quickAddExpense,
  body.df-mobile #scanReceiptBtnExpenses { display: none !important; }

  /* Overview: "Add entity" moves into the entity dropdown (injected by
   * mobile-app.js); "Export all" has no mobile story yet — hide the row. */
  body.df-mobile #overviewHeaderActions { display: none !important; }

  /* Injected "Add entity" row inside the entity dropdown. */
  body.df-mobile .df-ehp-add {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    margin-top: 4px;
    border: none;
    border-top: 1px solid rgba(140, 163, 184, 0.15);
    background: none;
    color: var(--teal-primary, #18D5D7);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
  }
  body.df-mobile .df-ehp-add svg { width: 18px; height: 18px; }
  /* Text links get an invisible expanded tap area (44px effective). */
  body.df-mobile .manage-link,
  body.df-mobile a.manage-link {
    display: inline-flex;
    align-items: center;
    padding: 13px 10px;
    margin: -13px -10px;
  }
  body.df-mobile input[type="text"],
  body.df-mobile input[type="number"],
  body.df-mobile input[type="date"],
  body.df-mobile select,
  body.df-mobile textarea {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }

  /* ---------- 4. Tables --------------------------------------------
   * Default: real momentum scroll inside an edge-faded container so no
   * column is unreachable (fixes S2 for secondary pages).             */
  body.df-mobile .table-container,
  body.df-mobile .data-table-wrapper,
  body.df-mobile .df-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Edge fade signals "there's more" without chrome. */
  body.df-mobile .df-scroll-x {
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  body.df-mobile .data-table { min-width: 640px; }

  /* Dashboard hero cards: desktop puts ring|body in a 2-col grid, which
   * squeezes everything into a ~110px column on phones. Stack instead:
   * ring centered on top, content full width beneath. */
  body.df-mobile .dash-hero {
    grid-template-columns: 1fr !important;
    justify-items: stretch;
    gap: 14px;
  }
  body.df-mobile .dash-hero .dh-ring { justify-self: center; }
  body.df-mobile .dash-hero .dh-body { width: 100%; min-width: 0; }
  body.df-mobile .dash-hero .dh-head { justify-content: space-between; }
  body.df-mobile .dash-hero .dh-qual-item,
  body.df-mobile .dash-hero .dh-action {
    width: 100%;
    min-height: 44px;
    align-items: center;
  }

  /* Hero bands stack on phones instead of squeezing text beside CTAs. */
  body.df-mobile .dash-hero-band {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  body.df-mobile .dash-hero-band .btn,
  body.df-mobile .dash-hero-band button { width: 100%; justify-content: center; }

  /* Rows of pills/controls wrap instead of poking off-screen. */
  body.df-mobile .dh-head { flex-wrap: wrap; gap: 8px; }
  body.df-mobile .dh-pill { flex-shrink: 1; min-width: 0; }
  body.df-mobile .ah-log-controls { flex-wrap: wrap; gap: 8px; max-width: 100%; }
  body.df-mobile .ah-timelog-filters {
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
  }
  body.df-mobile .ah-timelog-filters select,
  body.df-mobile .ah-timelog-filters input { max-width: 100%; min-width: 0; }
  body.df-mobile .ah-breakdown-card,
  body.df-mobile .ah-breakdown-card > * { max-width: 100%; min-width: 0; }
  body.df-mobile .ah-breakdown-row,
  body.df-mobile .ah-breakdown-row-head { max-width: 100%; min-width: 0; flex-wrap: wrap; }
  body.df-mobile .ah-breakdown-row-head > * { min-width: 0; }
  body.df-mobile .ah-breakdown-cat-pct { flex-shrink: 1; }
  body.df-mobile .form-group { max-width: 100%; min-width: 0; }
  body.df-mobile .form-group input,
  body.df-mobile .form-group select { max-width: 100%; }

  /* Expenses: full card treatment — the highest-traffic list.
   * Column order is fixed in app.html:
   * 1 checkbox · 2 date · 3 description · 4 category · 5 vendor
   * 6 amount · 7 receipt · 8 actions                                  */
  body.df-mobile #expensesTable { min-width: 0; display: block; }
  body.df-mobile #expensesTable thead { display: none; }
  body.df-mobile #expensesTable tbody { display: flex; flex-direction: column; gap: 10px; }
  body.df-mobile #expensesTable tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date    amount"
      "desc    amount"
      "meta    icons";
    gap: 2px 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--ocean-mid, #1A212B);
    border: 1px solid rgba(140, 163, 184, 0.12);
  }
  body.df-mobile #expensesTable tbody tr td { border: none; padding: 0; display: block; min-width: 0; }
  body.df-mobile #expensesTable td:nth-child(1) { display: none; }           /* bulk checkbox */
  body.df-mobile #expensesTable td:nth-child(2) {                            /* date */
    grid-area: date;
    font-size: 0.72rem;
    color: var(--text-muted, #8CA3B8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  body.df-mobile #expensesTable td:nth-child(3) {                            /* description */
    grid-area: desc;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.df-mobile #expensesTable td:nth-child(4),                             /* category */
  body.df-mobile #expensesTable td:nth-child(5) {                            /* vendor */
    grid-area: meta;
    display: inline;
    font-size: 0.78rem;
    color: var(--text-muted, #8CA3B8);
  }
  body.df-mobile #expensesTable td:nth-child(5)::before { content: " · "; }
  body.df-mobile #expensesTable td:nth-child(6) {                            /* amount */
    grid-area: amount;
    align-self: start;
    justify-self: end;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--teal-bright, #4CE5E7);
  }
  body.df-mobile #expensesTable td:nth-child(7),                             /* receipt */
  body.df-mobile #expensesTable td:nth-child(8) {                            /* actions */
    grid-area: icons;
    display: inline-flex;
    justify-self: end;
    align-items: center;
    gap: 6px;
  }
  body.df-mobile #expensesTable td:nth-child(8) button,
  body.df-mobile #expensesTable td:nth-child(7) .receipt-indicator {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ---------- 5. Modals as bottom sheets (fixes S7) ---------------- */
  body.df-mobile .modal { align-items: flex-end !important; padding: 0 !important; }
  body.df-mobile .modal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92dvh;
    overflow-y: auto;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    animation: dfSheetUp 0.22s ease-out;
  }
  @keyframes dfSheetUp {
    from { transform: translateY(24px); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  /* Grab handle for the sheet affordance. */
  body.df-mobile .modal .modal-content::before {
    content: "";
    display: block;
    width: 40px; height: 4px;
    margin: 2px auto 10px;
    border-radius: 2px;
    background: rgba(140, 163, 184, 0.35);
  }
  body.df-mobile .modal .modal-close { min-width: 44px; min-height: 44px; }
  /* Inline form rows inside sheets (e.g. mileage "add location":
   * name + address + save in one row) wrap instead of overflowing. */
  body.df-mobile .modal .add-location-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
  }
  body.df-mobile .modal .add-location-form input { flex: 1 1 100%; min-width: 0; }
  body.df-mobile .modal .add-location-form .btn { flex: 1 1 auto; }
  /* Generic guardrail: nothing inside a sheet may poke past its edge. */
  body.df-mobile .modal .modal-content input,
  body.df-mobile .modal .modal-content select,
  body.df-mobile .modal .modal-content textarea { max-width: 100%; }

  /* ---------- 6. "More" sheet -------------------------------------- */
  #dfMoreSheet {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(4, 10, 16, 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  #dfMoreSheet.open { display: flex; }
  .df-more-panel {
    background: var(--ocean-deep, #07131F);
    border-top: 1px solid rgba(24, 213, 215, 0.16);
    border-radius: 20px 20px 0 0;
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 78dvh;
    overflow-y: auto;
    animation: dfSheetUp 0.22s ease-out;
  }
  .df-more-panel::before {
    content: "";
    display: block;
    width: 40px; height: 4px;
    margin: 2px auto 12px;
    border-radius: 2px;
    background: rgba(140, 163, 184, 0.35);
  }
  .df-more-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #8CA3B8);
    margin: 6px 4px 8px;
  }
  .df-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .df-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--ocean-mid, #1A212B);
    border: 1px solid rgba(140, 163, 184, 0.10);
    color: var(--text-primary, #E8F1F8);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .df-more-item svg { width: 20px; height: 20px; color: var(--teal-primary, #18D5D7); flex: 0 0 auto; }
  .df-more-item.active { border-color: rgba(24, 213, 215, 0.45); }

  /* Hide the desktop rail + hamburger on phones: tab bar + More replace them. */
  body.df-mobile .nav-rail { display: none !important; }
  body.df-mobile .sidebar-toggle { display: none !important; }
}