/* ==========================================================================
   mauzo-app.css: the "feels like an app" layer for phones.
   Loads after mauzo-mobile.css (AppAsset). Everything is for phones (< 768px)
   except the page transitions and the progress bar, which also smooth desktop.
   Source: artifact "mauzo — mobile app layer" (1 Nov 2026), on the design tokens.
   ========================================================================== */

/* 1. Page-to-page transitions (Chrome/Edge 126+, Safari 18.2+; ignored elsewhere).
      The top bar and tab bar stay put; only the page content fades and slides. */
@view-transition { navigation: auto; }

.mz-topbar { view-transition-name: mz-topbar; }
.mz-tabbar { view-transition-name: mz-tabbar; }

::view-transition-old(root) { animation: mz-out 160ms ease-in both; }
::view-transition-new(root) { animation: mz-in 220ms cubic-bezier(.2, .8, .2, 1) both; }
html.mz-nav-back::view-transition-new(root) { animation-name: mz-in-back; }

@keyframes mz-out     { to   { opacity: 0; } }
@keyframes mz-in      { from { opacity: 0; transform: translateX(14px); } }
@keyframes mz-in-back { from { opacity: 0; transform: translateX(-14px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* 2. Navigation progress bar (mauzo-app.js shows it while the next page loads). */
.mz-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 2000;
  background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none; opacity: 0;
}
.mz-progress.is-on { opacity: 1; animation: mz-progress 8s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes mz-progress { from { transform: scaleX(0); } to { transform: scaleX(.92); } }
@media (prefers-reduced-motion: reduce) { .mz-progress.is-on { animation-duration: 0s; transform: scaleX(.92); } }


@media (max-width: 767.98px) {

  /* 3. Native feel basics -------------------------------------------------- */
  html {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;          /* no rubber-band of the whole shell */
    -webkit-text-size-adjust: 100%;
  }
  .mz-tabbar, .mz-topbar, .btn, .nav-link, .badge { -webkit-user-select: none; user-select: none; }
  .mz-tabbar a, .mz-topbar a { -webkit-touch-callout: none; }

  /* Press feedback wherever you can tap. */
  .btn, .nav-link, .list-group-item-action, .mz-row-link {
    transition: transform 90ms ease, background-color 120ms ease, opacity 120ms ease;
  }
  .btn:active, .nav-link:active { transform: scale(.97); }
  .mz-row-link:active { background: var(--surface-2); }

  /* The top bar gets a hairline and blur once the page scrolls under it. */
  .mz-topbar { transition: box-shadow 160ms ease, background-color 160ms ease; }
  html.mz-scrolled .mz-topbar {
    box-shadow: 0 1px 0 var(--border);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
            backdrop-filter: saturate(160%) blur(14px);
  }

  /* 4. Breathing room: 16px side gutters, like native apps. ----------------- */
  .page-wrapper > .page-header > .container-xl,
  .page-wrapper > .page-header > .container-fluid,
  .page-wrapper > .page-body > .container-xl,
  .page-wrapper > .page-body > .container-fluid {
    padding-left: 16px; padding-right: 16px;
  }

  /* 5. Page header: no section eyebrow (the tab bar says where you are), and
        less space above the title. ------------------------------------------ */
  .page-header { margin-top: .5rem; }
  .page-header .page-pretitle { display: none; }
  .page-header .page-title { font-size: 1.625rem; line-height: 1.15; }

  /* "Back to …" buttons become a chevron in the top bar (mauzo-app.js). */
  html.mz-has-back .page-header .mz-back-src { display: none !important; }
  .mz-topbar-back {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; margin-left: -6px; border-radius: 12px;
    color: inherit; text-decoration: none;
  }
  .mz-topbar-back svg { width: 22px; height: 22px; }
  .mz-topbar-back:active { background: var(--surface-2); }
  html.mz-has-back .mz-topbar-logo { display: none; }
  html.mz-has-back .page-header:not(:has(.page-title)) { display: none; }   /* the header only held the Back button */

  /* Pushed screens (create / edit): no tab bar, like a native app, so the
     sticky Save bar owns the bottom. */
  html.mz-pushed .mz-tabbar { display: none !important; }
  html.mz-pushed body { padding-bottom: env(safe-area-inset-bottom) !important; }
  html.mz-pushed .mz-form-bar,
  html.mz-pushed .mz-sticky-actions,
  html.mz-pushed [class*="action-bar"] { bottom: 0 !important; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* 6. Status pills inside a card header (Campaigns: All / Draft / Scheduled …)
        were squeezed to 1px wide, leaving a big blank block. Now one row of
        chips you swipe, with the filters on the row below. -------------------- */
  .page-body .card-header:has(> .card-header-pills) {
    flex-direction: column; align-items: stretch; gap: 1rem;
    padding-top: 12px; padding-bottom: 12px;
  }
  .page-body .card-header > .card-header-pills,
  .page-body .nav-tabs, .page-body .nav-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto; overflow-y: hidden;
    flex: 0 0 auto; width: auto; max-width: none;
    margin-left: -16px; margin-right: -16px; padding: 0 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
  }
  .page-body .card-header-pills::-webkit-scrollbar,
  .page-body .nav-tabs::-webkit-scrollbar, .page-body .nav-pills::-webkit-scrollbar { display: none; }
  .page-body :is(.card-header-pills, .nav-tabs, .nav-pills) .nav-item { flex: 0 0 auto; scroll-snap-align: start; }
  .page-body :is(.card-header-pills, .nav-tabs, .nav-pills) .nav-link { white-space: nowrap; }

  .page-body .card-header > form.ms-auto { margin-left: 0 !important; width: 100%; }
  .page-body .card-header > form.ms-auto > * { flex: 1 1 0; min-width: 0; }

  /* 7. Filters apply on change: no separate Filter button (mauzo-app.js). ----- */
  .mz-autofilter .mz-autofilter-btn { display: none !important; }

  /* 8. Lists: compact app rows. mauzo-mobile.js turns tables into .mz-cards
        with data-labels; here each record is a bold title, then the details
        flow inline as small "Label value" pairs, about half the height, and
        the whole row opens the record. ---------------------------------------- */
  table.mz-cards tbody tr {
    display: flex !important; flex-wrap: wrap; align-items: center;
    gap: 6px 14px; padding: 14px 16px !important; position: relative;
  }
  table.mz-cards tbody tr > td.mz-card-title {
    flex: 0 0 100%; padding: 0 40px 2px 0 !important; font-size: 1rem; font-weight: 600;
  }
  table.mz-cards tbody tr > td:not(.mz-card-title):not(.mz-card-menu):not(.mz-card-empty) {
    display: inline-flex !important; flex-direction: row !important; flex-wrap: wrap;
    align-items: center !important; justify-content: flex-start !important;
    width: auto !important; text-align: left !important; gap: 6px;
    padding: 0 !important; border: 0 !important; min-width: 0;
  }
  table.mz-cards tbody tr > td:not(.mz-card-title):not(.mz-card-menu)::before {
    font-size: .75rem; opacity: .55; margin: 0 !important;
    width: auto !important; flex: none !important; text-transform: none;
  }
  /* A cell with buttons in it (phone + call / WhatsApp) takes its own line. */
  table.mz-cards tbody tr > td:has(button, .btn):not(.mz-card-menu) { flex: 0 0 100%; }
  table.mz-cards tbody tr > td:has(button, .btn):not(.mz-card-menu)::before { display: none; }
  table.mz-cards tbody tr > td:has(button, .btn):not(.mz-card-menu),
  table.mz-cards tbody tr > td:has(button, .btn):not(.mz-card-menu) * {
    text-align: left !important; justify-content: flex-start !important; margin-left: 0 !important;
  }
  table.mz-cards tbody tr > td.mz-card-menu {
    position: absolute; top: 8px; right: 8px; padding: 0 !important; border: 0 !important;
  }
  table.mz-cards tbody tr.mz-row-link { cursor: pointer; }

  /* Stat tiles: big money stays on one line; mauzo-app.js shortens
     KES 2,362,305.80 to KES 2.36M (the full figure is in the tooltip). */
  .page-body .card-body > .h1.mz-short,
  .page-body .card-body > .h2.mz-short { white-space: nowrap !important; }

  /* Wide tables that stay tables (Stock levels) scroll inside their card. */
  .card > .table-responsive, .card > table:not(.mz-cards) { overflow-x: auto; display: block; }

  /* 9. Record pages: the action pile becomes a quick-action row. ------------ */
  .page-body :has(> .mz-quick-actions) { display: flex !important; flex-wrap: wrap !important; }
  .page-body :has(> .mz-quick-actions) > .btn { flex: 1 0 100%; min-height: 48px; }   /* the one main action */
  .mz-quick-actions {
    display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px;
    flex: 0 0 100%; width: 100%;
  }
  .mz-quick-actions > .btn {
    flex-direction: column; gap: 4px; height: auto; min-height: 64px;
    padding: 10px 4px; font-size: .75rem; white-space: normal; line-height: 1.1;
  }
  .mz-quick-actions > .btn > i, .mz-quick-actions > .btn > svg { font-size: 1.25rem; margin: 0 !important; }

  /* 10. Inputs: big and thumb-friendly; 16px so iPhones do not zoom. -------- */
  .form-control, .form-select { min-height: 44px; font-size: 16px; border-radius: 12px; }
  .card { border-radius: 16px; }

  /* 11. Toasts and alerts sit above the tab bar, not under it. -------------- */
  .toast-container, .alert-fixed { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
}

/* Installed to the home screen: no browser chrome, so keep clear of the notch. */
@media (display-mode: standalone) and (max-width: 767.98px) {
  .mz-topbar { padding-top: env(safe-area-inset-top); }
}