/* ============================================================================
   AAC Pro Estimator V104.3 — Mobile Responsive Layer (May 13, 2026 patch)
   ============================================================================
   V104.3 (May 13, 2026): Hide the lightning Power Tools FAB on Estimate
   mode so it no longer stacks visually with the + Quick-Add FAB. Sean
   reported "two floating buttons sitting on top of each other" — the +
   (quickAddFab) and the lightning bolt (aacRightRailFab) were both fixed
   bottom-right and overlapped on iPhone. Lightning Power Tools is still
   available on Home/Pipeline/Books/Job modes.
   ============================================================================
   ADDITIVE + OVERRIDE only. Do NOT duplicate rules in css/styles.css.
   This file is loaded AFTER styles.css and AFTER any V104.1 patch CSS.
*/
body[data-mode="estimate"] #aacRightRailFab,
body[data-mode="estimate"] .aac-right-rail-fab {
    display: none !important;
}
/* Closing the V104.3 patch block — original mobile responsive layer continues below. */
/*
   V104.1 doc header continues:
   Brand Identity Lock enforced: light surfaces, navy accent, gold highlights.
   NO heavy navy washes. Mobile inherits desktop's exact visual language.
   ============================================================================
   Breakpoints
     >=1280px   desktop-wide   (no overrides — V104 default)
     1024-1279  desktop        (right rail icon strip, Create-New 5 cols)
     768-1023   tablet         (bottom nav, right rail FAB, single-col estimate)
     480-767    mobile-large   (3-col grid, pipeline cards, sticky-bottom est.)
     <480       mobile-small   (2-col grid, all icon-only)
   ============================================================================ */

/* CSS variables specific to mobile layer */
:root {
  --m-touch-min: 44px;          /* Apple HIG */
  --m-input-min: 48px;          /* Material Design */
  --m-tile-min: 80px;           /* thumb-comfort tap-zone */
  --m-bottom-nav-h: 64px;
  --m-bottom-nav-h-safe: calc(64px + env(safe-area-inset-bottom, 0px));
  --m-fab-size: 56px;
  --m-fab-offset: 88px;         /* clear bottom nav */
  --m-fab-offset-estimate: 132px; /* V104.1 CRIT-7 fix: clear total bar (42px tall, sits 54px above bottom-nav) */
  --m-sheet-handle: 32px;
  --m-z-bottom-nav: 950;
  --m-z-fab: 940;
  --m-z-sheet: 945;
  --m-z-sheet-overlay: 944;
}

/* ============================================================================
   1280-1279px  desktop
   Right rail collapses to icon strip (56px), Create-New 5 cols
   ============================================================================ */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  /* Right rail in icon-strip mode (labels hide, icons centered) */
  .right-rail,
  .estimate-rail,
  .aac-right-rail {
    width: 56px;
    min-width: 56px;
  }
  .right-rail .rail-label,
  .estimate-rail .rail-label,
  .aac-right-rail__label {
    display: none;
  }
  .right-rail__tab,
  .aac-right-rail__tab {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* Create-New grid: 5 columns at this breakpoint */
  .create-new-grid,
  .home-create-new__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ============================================================================
   768-1023px  tablet
   Bottom nav appears, right rail becomes FAB, 4-col grid, single-col estimate
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Top nav hides; bottom-tab nav handles primary nav (see mobile-bottom-nav.html) */
  .app-shell__nav,
  .top-nav__primary,
  .main-tabs {
    display: none !important;
  }
  body.has-bottom-nav {
    padding-bottom: var(--m-bottom-nav-h-safe);
  }

  /* Right rail collapses entirely; FAB takes over */
  .right-rail,
  .estimate-rail,
  .aac-right-rail {
    display: none !important;
  }
  .aac-right-rail-fab {
    display: flex !important;
  }

  /* Create-New grid: 4 columns */
  .create-new-grid,
  .home-create-new__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Estimate page: single-column scroll */
  .estimate-layout {
    grid-template-columns: minmax(0, 1fr) !important; /* V104.3.47: 1fr→minmax(0,1fr) — plain 1fr=minmax(auto,1fr), auto min lets column grow past viewport */
  }
  .estimate-rail-col {
    order: 2;
  }

  /* Estimate Results panel: convert to sticky-bottom collapsible sheet */
  .estimate-results-panel,
  .estimate-summary-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--m-bottom-nav-h-safe);
    z-index: var(--m-z-sheet);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(25, 25, 95, 0.12);
    background: var(--white, #fff);
    border-top: 1px solid var(--gray-200, #e5e7eb);
    max-height: 70vh;
    overflow: hidden;
    transform: translateY(calc(100% - 72px));
    transition: transform 280ms cubic-bezier(0.32, 1, 0.55, 1);
  }
  .estimate-results-panel.is-expanded,
  .estimate-summary-panel.is-expanded {
    transform: translateY(0);
    overflow-y: auto;
  }

  /* Pipeline: stages collapse to dropdown OR horizontal chips */
  .pipeline-stages-list {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pipeline-stages-list::-webkit-scrollbar { display: none; }
  .pipeline-stage-item {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 8px 14px;
    white-space: nowrap;
  }

  /* Job cockpit phase tracker: horizontal scroll */
  .phase-tracker {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .phase-tracker__step {
    flex: 0 0 160px;
  }

  /* Books: stack AR aging buckets, reports tabs full-width */
  .ar-aging-buckets {
    grid-template-columns: repeat(2, 1fr);
  }
  .books-reports-tabs {
    width: 100%;
    overflow-x: auto;
  }
}

/* ============================================================================
   480-767px  mobile-large
   3-col Create-New, pipeline cards, sticky-bottom estimate, bottom nav
   ============================================================================ */
@media (min-width: 480px) and (max-width: 767.98px) {
  /* Top nav hides; bottom tab nav active */
  .app-shell__nav,
  .top-nav__primary,
  .main-tabs {
    display: none !important;
  }
  body.has-bottom-nav {
    padding-bottom: var(--m-bottom-nav-h-safe);
  }

  /* Right rail hidden, FAB visible */
  .right-rail,
  .estimate-rail,
  .aac-right-rail { display: none !important; }
  .aac-right-rail-fab { display: flex !important; }

  /* HOME: stat cards stack to 1-col, Create-New 3 cols, mobile push hidden */
  .home-stats,
  .stat-card-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .create-new-grid,
  .home-create-new__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .home-mobile-push,
  .mobile-push-card,
  .mobile-qr-card {
    display: none !important;
  }
  .onboarding-scorecard {
    width: 100%;
    margin: 12px 0;
  }

  /* PIPELINE: stages horizontal chips, leads as cards (table replaced) */
  .pipeline-stages-list {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pipeline-stages-list::-webkit-scrollbar { display: none; }
  .pipeline-stage-item {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 8px 14px;
    white-space: nowrap;
    min-height: var(--m-touch-min);
  }
  /* Hide desktop table, show pipeline-cards (drop-in from pipeline-cards.html) */
  .pipeline-table,
  table.pipeline-leads {
    display: none !important;
  }
  .pipeline-cards {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  /* ESTIMATE: single column, sticky-bottom results sheet */
  .estimate-layout {
    grid-template-columns: minmax(0, 1fr) !important; /* V104.3.47: 1fr→minmax(0,1fr) */
    gap: 12px;
  }
  .estimate-results-panel,
  .estimate-summary-panel {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--m-bottom-nav-h-safe);
    z-index: var(--m-z-sheet);
    border-radius: 16px 16px 0 0;
    background: var(--white, #fff);
    border-top: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: 0 -10px 30px rgba(25,25,95,0.12);
    max-height: 70vh;
    transform: translateY(calc(100% - 72px));
    transition: transform 280ms cubic-bezier(0.32,1,0.55,1);
    overflow: hidden;
  }
  .estimate-results-panel.is-expanded,
  .estimate-summary-panel.is-expanded {
    transform: translateY(0);
    overflow-y: auto;
  }
  /* Estimate icon-buttons: hide labels */
  .estimate-toolbar .btn-label,
  .estimate-actions .btn-label {
    display: none;
  }

  /* JOB COCKPIT: stats stack, phase tracker horizontal scroll */
  .job-cockpit-stats,
  .cockpit-stat-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .phase-tracker {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    /* overflow shadow indicator */
    background:
      linear-gradient(90deg, var(--white) 0%, transparent 8%, transparent 92%, var(--white) 100%);
  }
  .phase-tracker__step { flex: 0 0 160px; }
  .activity-feed { width: 100%; }

  /* BOOKS: AR aging stack, reports full-width, QB sync top */
  .ar-aging-buckets {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .books-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .qb-sync-card { order: -1; width: 100%; }
  .books-reports-tabs {
    width: 100%;
    overflow-x: auto;
  }

  /* Touch-size enforcement (mobile-large) */
  button,
  .btn,
  .button,
  [role="button"],
  .pipeline-stage-item,
  .nav-item {
    min-height: var(--m-touch-min);
    min-width: var(--m-touch-min);
  }
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  textarea,
  select {
    min-height: var(--m-input-min);
    font-size: 16px; /* prevents iOS zoom on focus */
  }
  .tile-card,
  .create-new-grid > * {
    min-height: var(--m-tile-min);
  }
}

/* ============================================================================
   <480px  mobile-small
   2-col Create-New, all icon-only buttons
   ============================================================================ */
@media (max-width: 479.98px) {
  /* Top nav hides; bottom tab nav active */
  .app-shell__nav,
  .top-nav__primary,
  .main-tabs { display: none !important; }
  body.has-bottom-nav {
    padding-bottom: var(--m-bottom-nav-h-safe);
  }

  /* Right rail: FAB only */
  .right-rail,
  .estimate-rail,
  .aac-right-rail { display: none !important; }
  .aac-right-rail-fab { display: flex !important; }

  /* HOME */
  .home-stats,
  .stat-card-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .create-new-grid,
  .home-create-new__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .home-mobile-push,
  .mobile-push-card,
  .mobile-qr-card { display: none !important; }
  /* Card titles tighten */
  .stat-card__value,
  .home-stats__num {
    font-size: 28px;
  }

  /* PIPELINE: same card pattern; chip row tightened */
  .pipeline-stages-list {
    padding: 8px;
    gap: 6px;
  }
  .pipeline-stage-item {
    padding: 8px 12px;
    font-size: 13px;
  }
  .pipeline-table,
  table.pipeline-leads { display: none !important; }
  .pipeline-cards {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }

  /* ESTIMATE: single col, sheet at bottom */
  .estimate-layout {
    grid-template-columns: minmax(0, 1fr) !important; /* V104.3.47: 1fr→minmax(0,1fr) */
    gap: 10px;
  }
  .estimate-results-panel,
  .estimate-summary-panel {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--m-bottom-nav-h-safe);
    z-index: var(--m-z-sheet);
    border-radius: 16px 16px 0 0;
    background: var(--white, #fff);
    border-top: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: 0 -10px 30px rgba(25,25,95,0.12);
    max-height: 75vh;
    transform: translateY(calc(100% - 64px));
    transition: transform 280ms cubic-bezier(0.32,1,0.55,1);
    overflow: hidden;
  }
  .estimate-results-panel.is-expanded,
  .estimate-summary-panel.is-expanded {
    transform: translateY(0);
    overflow-y: auto;
  }

  /* All icon-buttons drop labels */
  .btn-label,
  .button-label,
  .estimate-toolbar .btn-label,
  .estimate-actions .btn-label { display: none !important; }

  /* JOB COCKPIT */
  .job-cockpit-stats,
  .cockpit-stat-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .phase-tracker {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .phase-tracker__step { flex: 0 0 140px; }

  /* BOOKS */
  .ar-aging-buckets {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .books-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .qb-sync-card { order: -1; width: 100%; }

  /* Touch-size enforcement (mobile-small) */
  button,
  .btn,
  .button,
  [role="button"] {
    min-height: var(--m-touch-min);
    min-width: var(--m-touch-min);
  }
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  textarea,
  select {
    min-height: var(--m-input-min);
    font-size: 16px;
  }
  .tile-card,
  .create-new-grid > * {
    min-height: var(--m-tile-min);
  }

  /* Status pills: enforce minimum readable size */
  .status-pill,
  .pipeline-stage-pill,
  .badge {
    min-height: 24px;
    padding: 4px 10px;
    font-size: 12px;
  }
}

/* ============================================================================
   Bottom-tab nav (visible <1024px). Drop-in markup: mobile-bottom-nav.html
   ============================================================================ */
.aac-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--m-z-bottom-nav);
  height: var(--m-bottom-nav-h-safe);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--white, #fff);
  border-top: 1px solid var(--gray-200, #e5e7eb);
  box-shadow: 0 -2px 10px rgba(25, 25, 95, 0.06);
  /* hide-on-scroll-down state */
  transform: translateY(0);
  transition: transform 220ms cubic-bezier(0.32, 1, 0.55, 1);
}
.aac-bottom-nav.is-hidden {
  transform: translateY(100%);
}
.aac-bottom-nav__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: var(--m-bottom-nav-h);
  align-items: stretch;
}
.aac-bottom-nav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--m-touch-min);
  border: 0;
  background: transparent;
  color: var(--gray-600, #4b5563);
  font: 500 11px/1 var(--font-body, 'Montserrat', sans-serif);
  cursor: pointer;
  padding: 6px 4px;
  -webkit-tap-highlight-color: transparent;
}
.aac-bottom-nav__item .aac-ic,
.aac-bottom-nav__item svg,
.aac-bottom-nav__item img {
  width: 22px;
  height: 22px;
}
.aac-bottom-nav__item[aria-current="page"],
.aac-bottom-nav__item.is-active {
  color: var(--navy-primary, #19195F);
}
.aac-bottom-nav__item[aria-current="page"]::before,
.aac-bottom-nav__item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--navy-primary, #19195F);
  border-radius: 0 0 3px 3px;
}
.aac-bottom-nav__label {
  font-size: 11px;
  letter-spacing: 0.01em;
}
@media (max-width: 359.98px) {
  .aac-bottom-nav__label { display: none; }
}
@media (max-width: 1023.98px) {
  .aac-bottom-nav { display: block; }
}

/* ============================================================================
   Right-rail FAB (visible <1024px). Drop-in markup: right-rail-mobile-fab.html
   ============================================================================ */
.aac-right-rail-fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(var(--m-fab-offset) + env(safe-area-inset-bottom, 0px));
  z-index: var(--m-z-fab);
  width: var(--m-fab-size);
  height: var(--m-fab-size);
  border-radius: 50%;
  border: 0;
  background: var(--gold-accent, #C9A84C);
  color: var(--navy-primary, #19195F);
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.4),
              0 2px 6px rgba(25, 25, 95, 0.18);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms cubic-bezier(0.32, 1, 0.55, 1);
}
.aac-right-rail-fab:active {
  transform: scale(0.94);
}
.aac-right-rail-fab svg,
.aac-right-rail-fab .aac-ic {
  width: 24px;
  height: 24px;
}

/* Right-rail full-screen mobile modal */
.aac-right-rail-mobile-modal {
  position: fixed;
  inset: 0;
  z-index: 960;
  background: var(--white, #fff);
  display: none;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.aac-right-rail-mobile-modal.is-open {
  display: flex;
}
.aac-right-rail-mobile-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.aac-right-rail-mobile-modal__title {
  font: 600 16px/1.2 var(--font-display, 'Playfair Display', serif);
  color: var(--navy-primary, #19195F);
  margin: 0;
}
.aac-right-rail-mobile-modal__close {
  background: transparent;
  border: 0;
  width: var(--m-touch-min);
  height: var(--m-touch-min);
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
}
.aac-right-rail-mobile-modal__tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  padding: 0 8px;
}
.aac-right-rail-mobile-modal__tab {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  min-height: var(--m-touch-min);
  color: var(--gray-600, #4b5563);
  font-weight: 500;
  cursor: pointer;
  position: relative;
}
.aac-right-rail-mobile-modal__tab.is-active {
  color: var(--navy-primary, #19195F);
}
.aac-right-rail-mobile-modal__tab.is-active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2px;
  background: var(--gold-accent, #C9A84C);
}
.aac-right-rail-mobile-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* ============================================================================
   Pipeline mobile cards (drop-in markup: pipeline-cards.html)
   ============================================================================ */
.pipeline-cards { display: none; }
.pipeline-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-left: 4px solid var(--navy-primary, #19195F);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(25, 25, 95, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.pipeline-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(25, 25, 95, 0.08);
}
.pipeline-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.pipeline-card__client {
  font: 700 16px/1.2 var(--font-body, 'Montserrat', sans-serif);
  color: var(--gray-900, #111827);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pipeline-card__value {
  font: 700 16px/1 var(--font-display, 'Playfair Display', serif);
  color: var(--gold-accent, #C9A84C);
  white-space: nowrap;
  flex-shrink: 0;
}
.pipeline-card__mid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pipeline-card__type {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700, #374151);
}
.pipeline-card__address {
  font-size: 12px;
  color: var(--gray-500, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pipeline-card__bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pipeline-card__stage,
.pipeline-card__aging,
.pipeline-card__activity {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pipeline-card__stage {
  background: rgba(25, 25, 95, 0.08);
  color: var(--navy-primary, #19195F);
  font-weight: 600;
}
.pipeline-card__aging {
  background: rgba(201, 168, 76, 0.15);
  color: #8a7016;
  font-weight: 600;
}
.pipeline-card__aging.is-stale {
  background: var(--error-bg, #fef2f2);
  color: var(--error-red, #dc2626);
}
.pipeline-card__activity {
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-600, #4b5563);
  margin-left: auto;
}

/* ============================================================================
   Estimate Results sticky-bottom sheet (drop-in: estimate-results-sheet.html)
   ============================================================================ */
.estimate-results-sheet {
  display: none;
}
.estimate-results-sheet__handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 16px 12px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.estimate-results-sheet__grip {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--gray-300, #d1d5db);
  margin-bottom: 8px;
}
.estimate-results-sheet__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}
.estimate-results-sheet__total-label {
  font: 500 13px/1 var(--font-body, 'Montserrat', sans-serif);
  color: var(--gray-500, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.estimate-results-sheet__total {
  font: 700 20px/1 var(--font-display, 'Playfair Display', serif);
  color: var(--navy-primary, #19195F);
}
.estimate-results-sheet__hint {
  font-size: 12px;
  color: var(--gold-accent, #C9A84C);
  font-weight: 600;
}
.estimate-results-sheet__body {
  padding: 16px;
  overflow-y: auto;
  max-height: calc(70vh - 72px);
}

/* show on tablet and below */
@media (max-width: 1023.98px) {
  .estimate-results-sheet { display: block; }
}

/* ============================================================================
   Status pill / badge mobile minimum size
   ============================================================================ */
@media (max-width: 767.98px) {
  .status-pill,
  .pipeline-stage-pill,
  .badge,
  .lead-status {
    min-height: 24px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.3;
  }
}

/* ============================================================================
   Reduced motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .aac-bottom-nav,
  .aac-right-rail-fab,
  .estimate-results-panel,
  .estimate-summary-panel,
  .estimate-results-sheet,
  .pipeline-card {
    transition: none !important;
  }
}


/* ============================================================================
   V104.1 CRIT-7 fix — bump right-rail FAB clear of the sticky total bar
   when on the Estimate mode. The total bar sits at bottom:54px and is 42px
   tall, so the FAB needs bottom >= ~104px to stay above it. We use 132px
   to leave a comfortable gap. Other modes keep the original 88px offset.
   ============================================================================ */
body[data-mode="estimate"] .aac-right-rail-fab,
body[data-mode="estimate"] .aac-help-trigger.is-fab,
body[data-mode="estimate"] .aac-help-fab,
body[data-mode="estimate"] #aacHelpFab {
  bottom: calc(var(--m-fab-offset-estimate, 132px) + env(safe-area-inset-bottom, 0px)) !important;
}


/* ============================================================================
   V104.1 CRIT-8/9 fix — Pipeline filters + Books table mobile overflow
   At <=768px: stack pipeline filters vertically (one per row), force the
   parent toolbar to wrap so the search input + filter bar each take a row,
   and switch the invoice table to a horizontally-scrollable container so
   no columns get clipped off the right edge.
   ============================================================================ */
@media (max-width: 768px) {
  /* Pipeline toolbar: search + filter bar each take a full row */
  .aac-pipeline-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .aac-pipeline-search {
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
  }
  /* Pipeline filter bar: each filter takes the full row width to remove
     horizontal overflow at <=430px viewports. */
  .aac-pipeline-filter-bar {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 4px;
  }
  .aac-pipeline-filter {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Books invoice ledger: enable horizontal scroll inside the body so the
     table never overflows the page itself. */
  #aacBooksInvoicesBody {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  #aacBooksInvoicesBody .aac-inv-table {
    min-width: 640px; /* let it scroll horizontally rather than clip */
  }
  /* Books actions row: any +Invoice / +From Estimate / +Milestone row inside
     a card body should also wrap. */
  .aac-books-section .card__body > .row,
  .aac-books-section .card__body > .actions-row,
  .aac-books-section .card__body > [class*="actions"] {
    flex-wrap: wrap;
  }
}

/* ============================================================================
   IOS_PIPELINE_FIX v2 — May 8, 2026 (Sean's 2nd round of iOS feedback)
   Three Pipeline issues to address:
   1) Search box "Search by client or project…" still too tall/wide
   2) Empty state ("No leads yet") running off the right edge of the screen
      — root cause: it lives inside .aac-pipeline-table-wrap which has
        overflow-x:auto AND .aac-pipeline-table has min-width:720px on mobile,
        so the empty <div> inherits the 720px scrollable content width
   3) Gear refresh button (.aac-pipeline-refresh) had no CSS — iOS rendered
      it as a default-styled button, looking oversized/wrong
   ============================================================================ */
@media (max-width: 768px) {
  /* Fix 1: Search input — tight, capped, no flex-grow to oversize it */
  .aac-pipeline-search {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    height: 32px !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  /* Fix 2: Empty state breaks OUT of the 720px scrollable parent and pins
     to viewport width. position:sticky + left:0 keeps it in view even
     though its parent is 720px wide. */
  .aac-pipeline-empty {
    position: sticky !important;
    left: 0 !important;
    width: calc(100vw - 56px) !important;
    max-width: calc(100vw - 56px) !important;
    margin: 0 !important;
    padding: 14px 10px !important;
    box-sizing: border-box !important;
    text-align: center;
  }
  .aac-pipeline-empty .empty-state {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .aac-pipeline-empty .empty-state__title {
    font-size: 14px !important;
    margin: 0 0 4px !important;
    line-height: 1.25 !important;
  }
  .aac-pipeline-empty .empty-state__body {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* Fix 3: Gear refresh button — explicit small circular icon button so iOS
     stops rendering it as a default sized chrome button */
  .aac-pipeline-refresh {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    margin-left: auto !important;
    border: 1px solid #e5e1d4 !important;
    background: #fff !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #19195F !important;
    cursor: pointer;
  }
  .aac-pipeline-refresh .aac-ic {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ============================================================================
   HIGH-1 FIX — Estimate top bar two-row stack at narrow widths (May 8, 2026)
   The v78 shell's right meta cluster has: Invite Team + Help + ES-XXXXX +
   Draft pill + Saved indicator + Timer slot. At <=768px these all wrap
   awkwardly. The ES code + Draft pill + Saved indicator are already shown
   in `.aac-estimate-topbar` below, so suppress them on mobile to declutter.
   ============================================================================ */
@media (max-width: 768px) {
  /* Duplicated estimate code/status — also rendered in aac-estimate-topbar */
  .app-shell__meta-estimate {
    display: none !important;
  }
  /* Autosave indicator — collapse to icon-only on phones to save space */
  .aac-shell-autosave > span:last-child {
    display: none !important;
  }
  .aac-shell-autosave {
    padding: 4px 6px !important;
    margin-right: 6px !important;
  }
  /* Compact Invite Team button — icon only at narrow */
  .aac-btn-invite-shell .aac-invite-label {
    display: none !important;
  }
  .aac-btn-invite-shell {
    padding: 6px 8px !important;
    margin-right: 6px !important;
  }
  /* Brand divider + user name take valuable space — drop user name on phones */
  .app-shell__user {
    display: none !important;
  }
  .app-shell__brand-divider {
    display: none !important;
  }
}

/* ============================================================================
   HIGH-8 FIX — "Reset estimate" link visual treatment (May 8, 2026)
   The handler is already protected by AACModal.confirm. The bug is purely
   visual: a grey-pill link looks too casual. On phones the Actions menu's
   Delete entry covers this need, so hide the inline link there. On desktop
   recolor it as destructive so it reads as a dangerous action.
   ============================================================================ */
@media (max-width: 768px) {
  .aac-reset-link {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .aac-reset-link {
    color: #b91c1c !important;
    border-color: rgba(185, 28, 28, 0.35) !important;
  }
  .aac-reset-link:hover {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #b91c1c !important;
  }
}

/* Fix 3: Force "Open" buttons (and all .aac-btn instances) to flex-center
   their text precisely. iOS Safari can render off-center otherwise.
   This applies at all viewport widths but is iOS-critical. */
.aac-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Make sure the Michigan documents tile buttons stay neat at narrow widths */
@media (max-width: 540px) {
  .aac-books-tax-tile {
    padding: 12px 10px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .aac-books-tax-tile > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
  .aac-books-tax-tile > .aac-btn,
  .aac-books-tax-tile > button {
    min-width: 88px;
    align-self: flex-start;
  }
}


/* ============================================================================
   HIGH+ FIX — Modal footer button text overflow (May 8, 2026)
   Sean reported: Change Order modal "Generate PDF" button text runs off,
   and Invoice modal buttons same issue. Root cause: at narrow widths, 4
   buttons sharing one row at flex:1 → each button ~75px → text overflows.
   Fix: stack column-style on phones, button text wraps, full width.
   ============================================================================ */
@media (max-width: 540px) {
  /* Change Order modal footer — stack 4 buttons vertically, primary on top */
  .aac-co-modal-footer {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }
  .aac-co-modal-footer button {
    width: 100% !important;
    flex: 0 0 auto !important;
    white-space: normal !important;
    min-height: 44px;
  }

  /* Invoice modal footer — already column at <=540px from styles.css; reinforce
     so the inner left/right groups also stack and buttons take full width */
  .aac-inv-footer-left,
  .aac-inv-footer-right {
    flex-direction: column !important;
    width: 100% !important;
  }
  .aac-inv-footer button {
    width: 100% !important;
    flex: 0 0 auto !important;
    white-space: normal !important;
    min-height: 44px;
  }

  /* Generic safety net — any .aac-form-btn instance: full width + text-wrap */
  .aac-form-btn {
    width: 100% !important;
    white-space: normal !important;
    min-height: 44px;
  }
}

/* ============================================================================
   SMOKE-TEST FIX BATCH (May 8, 2026) — Help icon click safety + aging-card active state
   ============================================================================ */
/* Help icon: ensure it's clickable on mobile (z-index + pointer-events safety
   net so no overlapping element intercepts the tap) */
.aac-help-trigger {
  position: relative !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: rgba(25,25,95,0.1);
}

/* Aging cards: visual active state when filter is engaged */
.aac-aging-bucket.is-active {
  outline: 2px solid #19195F !important;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(25,25,95,0.08) !important;
}
.aac-aging-bucket {
  cursor: pointer;
  transition: outline .12s ease, box-shadow .12s ease;
}

/* ============================================================================
   POLISH SWEEP — May 8, 2026
   Knocks out 11 remaining items from the original IOS_FULL_SMOKE_TEST.md:
   HIGH-3, MED-1..6, MED-7/8, LOW-1..4, LOW-5
   ============================================================================ */

/* HIGH-3 — Empty white box above "Upload Photos" dropzone:
   #photoPreview is a generic <div> with margins; when empty it can render as a
   visible blank card on iOS. Same for #photoStatus. Hide when empty. */
#photoPreview:empty,
#photoStatus:empty {
  display: none !important;
}

/* MED-1 — DEMO MODE pill clipping at right edge: pad it in from viewport */
.aac-demo-badge,
.aac-demo-mode-pill {
  margin-right: 8px;
  max-width: calc(100vw - 12px);
}

/* MED-2 — Heavy navy "credentials bar" block at the bottom of Home:
   Brand Identity Lock says NO heavy navy washes. Convert to a light surface
   with navy text + gold accent border. Tablet/desktop unchanged. */
@media (max-width: 1023px) {
  .credentials-bar,
  .aac-credentials-footer {
    background: #fff !important;
    color: #19195F !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 2px solid #C9A84C !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    text-align: center;
    font-size: 11px !important;
  }
  .credentials-bar strong,
  .aac-credentials-footer strong {
    color: #19195F !important;
    font-weight: 700;
  }
  .credentials-bar .credential,
  .aac-credentials-footer span {
    display: inline-block;
    margin: 2px 6px;
  }
}

/* MED-3 — License #2101179929 was duplicated 3× on Home (Mobile Push panel,
   page footer, credentials bar). Mobile Push card already hidden on phones
   (aac-mobile.css line 199). Hide the older lower-half credentials bar so
   only the canonical credentials-footer remains. */
@media (max-width: 767.98px) {
  .credentials-bar {
    display: none !important;
  }
}

/* MED-4 — Job Cockpit "View full schedule" link clipped at right edge */
.section-link[data-cockpit-action="open-gantt"] {
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MED-7 — "Skip onboarding" link sub-44px touch target */
.aac-onboard-skip {
  display: inline-block;
  min-height: 44px;
  padding: 12px 8px;
  line-height: 20px;
  font-weight: 600;
}

/* MED-8 + LOW-3 + LOW-4 — Help panel articles, Phone, Email all sub-44px */
.aac-help-list li a {
  min-height: 44px;
  padding: 12px 4px;
  display: flex;
  align-items: center;
}
.aac-help-contact-btn {
  min-height: 44px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* LOW-2 — "Get notified" Mobile Push button (35px tall) — Mobile Push card
   itself is already hidden on <=767px so this is for tablet/desktop only.
   Set min-height for accessibility. */
.mobile-push-card button,
.aac-push-cta {
  min-height: 44px;
}

/* LOW-5 — Invite Team button has gold-outlined style by default which reads
   as "selected." Calm it down to neutral border like the Help button. The
   gold border returns on hover/focus to indicate interaction. */
.aac-btn-invite-shell {
  border-color: rgba(25,25,95,0.18) !important;
}
.aac-btn-invite-shell:hover,
.aac-btn-invite-shell:focus-visible {
  border-color: #C9A84C !important;
}

/* LOW-1 — Brand triangle logo sub-44 touch target. Add a tap padding without
   visually changing the icon size. */
.app-shell__brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  margin-left: -6px; /* compensate for added padding */
}

/* ============================================================================
   BOOKS PAGE WIDTH CONTAINMENT — May 8, 2026
   Sean reported the entire Books page running off the right edge on iPhone.
   Root cause is generic: inner content (tables, long QBO status strings,
   sub roster grids, payment links) doesn't have a containing scroll
   ancestor, so it pushes the whole section past the viewport.
   Fix: force every Books descendant to stay within the section width
   and give wide children their own internal scroll.
   ============================================================================ */
@media (max-width: 768px) {
  /* The mode section itself never overflows */
  .aac-mode-section[data-mode-section="books"],
  #aacBooksSection {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }

  /* The grid that holds the cards */
  .aac-books-sections {
    max-width: 100% !important;
    padding: 12px 12px 24px !important;
    grid-template-columns: 1fr !important;
  }

  /* Every Books card stays inside viewport */
  .aac-books-section {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 14px 14px !important;
    overflow: hidden;
  }
  .aac-books-section .card__body,
  .aac-books-section .card__header {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Wide content inside Books cards: allow internal horizontal scroll
     instead of pushing the parent. Tables and pre-formatted text are
     the usual culprits. */
  .aac-books-section table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    word-break: keep-all;
  }
  .aac-books-section pre,
  .aac-books-section code,
  .aac-books-section .aac-fin-reports,
  .aac-books-section .aac-fin-tabpanel {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Long inline strings (emails, URLs, QBO realm IDs) wrap instead of
     pushing the row out. */
  .aac-books-section a,
  .aac-books-section .aac-qbo-realm,
  .aac-books-section .aac-qbo-status,
  .aac-books-section .aac-pay-link,
  .aac-books-section [class*="aac-co-row"] {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* Financial reports tab strip can horizontal-scroll if labels are long */
  .aac-fin-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .aac-fin-tabs::-webkit-scrollbar { display: none; }
  .aac-fin-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Aging grid: stack to 2 cols on phone (already at <=600px in styles.css
     but force here at our 768 boundary too in case the breakpoint isn't hit) */
  .aac-aging-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .aac-aging-bucket {
    padding: 10px 8px !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .aac-aging-amount { font-size: 16px !important; }
  .aac-aging-count { font-size: 10px !important; }
  .aac-aging-label { font-size: 9px !important; }

  /* QuickBooks card: wrap long realm IDs and status sentences */
  #aacQboCardBody,
  #aacQboCardBody * {
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-wrap: anywhere !important;
  }
}

/* ============================================================================
   ACTIONS MENU CLIPPING FIX — May 8, 2026
   Sean reported the Estimate Actions kebab menu opens with first letter of
   every item clipped: "uplicate / rchive / rint / xport PDF / elete".
   Root cause: `.aac-est-menu` uses `position: absolute; right: 0` anchored
   to its parent `.aac-est-action-wrap`. On phone the wrap sits to the LEFT
   in the topbar action row, so the 200px-wide menu blows past the viewport
   left edge. Fix: switch to position:fixed at narrow widths, anchored to
   the right edge of the viewport with safe gutters.
   ============================================================================ */
@media (max-width: 768px) {
  .aac-est-menu {
    position: fixed !important;
    top: auto !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    /* Position relative to where the topbar lives — V78 shell header is
       64px tall, our topbar adds ~56px, so menu drops ~120px from top.
       Use a transform-friendly anchor that lets the menu's natural
       top-of-stacking-context placement work, but cap so menu can't
       fly off screen. */
    margin-top: 4px;
    min-width: 180px !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 9000 !important;
    box-sizing: border-box;
  }
  /* The action-wrap parent needs to be a stacking context so the fixed
     menu can position relative to viewport without being clipped by an
     overflow:hidden ancestor. */
  .aac-est-action-wrap {
    position: static !important;
  }
  /* Ensure menu items don't overflow horizontally */
  .aac-est-menu-item {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* For the very narrow phone viewport, fall back to absolute centering of
   the menu under the kebab when fixed positioning isn't ideal. */
@media (max-width: 420px) {
  .aac-est-menu {
    right: 8px !important;
    min-width: 160px !important;
  }
}

/* ============================================================================
   HOME CTA LIGHTEN — May 8, 2026
   Sean: heavy navy "New estimate" button on Home looks too dark vs the rest
   of the light-surface page. Convert .aac-cta-btn (used only for the home
   header CTA) to the lighter gold-on-navy variant so it reads as a clear
   CTA without the heavy navy wash. Hover stays gold for premium feel.
   ============================================================================ */
.aac-cta-btn {
  background: #C9A84C !important;
  color: #19195F !important;
  background-image: none !important;
  border: 1.5px solid #C9A84C !important;
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.25) !important;
  font-weight: 700;
}
.aac-cta-btn:hover,
.aac-cta-btn:focus-visible {
  background: #DDB96E !important;
  color: #19195F !important;
  border-color: #DDB96E !important;
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.35) !important;
}
.aac-cta-btn:active {
  background: #b8983f !important;
  box-shadow: 0 1px 4px rgba(201, 168, 76, 0.3) !important;
}