/* =============================================================================
   mobile-native.css — native-app look for the Yaaleh frontend inside the MAUI shell.

   EVERY rule is gated by BOTH:
     • @media (max-width: 768px)   — so it never reaches desktop, and so the --m-*
                                      tokens (defined in mobile-app.css under the same
                                      media query) resolve.
     • html.yaaleh-maui-app        — so it only applies inside the native shell, never
                                      a phone browser; and the element+class prefix wins
                                      the cascade against Bootstrap/scoped CSS (0,2,x).

   Loaded AFTER mobile-app.css so it wins ties. The desktop web is byte-identical:
   nothing here exists outside the media query except inert @keyframes.
   Design language: iOS "inset grouped" lists, tabular financial figures, the Yaaleh
   blue, with one signature — the aging "risk strip".
   ============================================================================= */

@media (max-width: 768px) {

  /* ---- Tokens: financial aging ramp + body face (extend mobile-app.css :root) ---- */
  html.yaaleh-maui-app {
    --m-body: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --m-age-1: #00c785; /* 0–5d   (current)  */
    --m-age-2: #5bbf3a; /* 6–30d            */
    --m-age-3: #b0bf2e; /* 31–60d           */
    --m-age-4: #e0a008; /* 61–90d           */
    --m-age-5: #e0660a; /* 91–120d          */
    --m-age-6: #d60000; /* >120d   (overdue) */
  }

  /* ---- Base: native body face + tabular figures so money columns align ---- */
  html.yaaleh-maui-app body {
    font-family: var(--m-body);
    background: var(--m-bg);
  }

  html.yaaleh-maui-app .content,
  html.yaaleh-maui-app .card,
  html.yaaleh-maui-app .modal-content,
  html.yaaleh-maui-app .table td,
  html.yaaleh-maui-app .table th,
  html.yaaleh-maui-app .badge,
  html.yaaleh-maui-app .ds-num,
  html.yaaleh-maui-app .aging-strip__total {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* =====================================================================
     CARDS → inset grouped surfaces
     ===================================================================== */
  html.yaaleh-maui-app .card {
    border: 1px solid var(--m-border);
    border-radius: var(--m-r);
    box-shadow: var(--m-shadow);
    background: var(--m-surface);
  }

  html.yaaleh-maui-app .card .card {
    box-shadow: none; /* avoid nested elevation */
  }

  html.yaaleh-maui-app .card-header {
    background: transparent;
    border-bottom: 1px solid var(--m-border);
    font-family: var(--m-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--m-ink-soft);
  }

  /* The Web Push permission prompt ("Ativar Notificações") is irrelevant in the native
     shell (WKWebView has no Web Push — native push handles it) and renders broken at the top
     on mobile. Hide it; real notifications still arrive via the SignalR toasts. */
  html.yaaleh-maui-app .push-toast,
  html.yaaleh-maui-app .push-prompt-backdrop {
    display: none !important;
  }

  /* =====================================================================
     TABLES → typography for the cards-mobile recipe (app.css owns the layout)
     ===================================================================== */
  html.yaaleh-maui-app table.cards-mobile td {
    font-size: 0.92rem;
  }

  html.yaaleh-maui-app table.cards-mobile td::before {
    font-family: var(--m-display);
    color: var(--m-ink-soft);
  }

  /* The value side of each label→value row reads as the data point. */
  html.yaaleh-maui-app table.cards-mobile td {
    color: var(--m-ink);
    font-weight: 500;
  }

  /* Clean inset surface: neutralize Bootstrap .table / .table-striped / .table-bordered so
     each card reads as ONE white surface, not gray striped cells. The gray came from the
     striped inset box-shadow (--bs-table-striped-bg) painting over the white row. */
  html.yaaleh-maui-app table.cards-mobile > tbody > tr > td {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-bg-type: transparent;
    --bs-table-bg-state: transparent;
    background-color: transparent;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--m-border);
  }

  html.yaaleh-maui-app table.cards-mobile > tbody > tr > td:last-child {
    border-bottom: 0;
  }

  /* When a table carries BOTH .ds-table (desktop look) and .cards-mobile (mobile transform), the
     cards-mobile recipe owns the layout at ≤768px. Neutralize the .ds-table constraints that break
     the card: the 640px min-width (which pushed values off-screen), the gray zebra, the gray header
     band, and the table min-width — so each row stays one white card with label→value rows. */
  html.yaaleh-maui-app table.cards-mobile.ds-table {
    min-width: 0 !important;
    display: block;
  }
  html.yaaleh-maui-app table.cards-mobile.ds-table > thead {
    display: none;
  }
  html.yaaleh-maui-app table.cards-mobile.ds-table > tbody > tr:nth-child(even) > td,
  html.yaaleh-maui-app table.cards-mobile.ds-table > tbody > tr:nth-child(odd) > td {
    background: transparent !important;
  }

  /* The row IS the card surface. */
  html.yaaleh-maui-app table.cards-mobile > tbody > tr {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r);
    box-shadow: var(--m-shadow-soft);
  }

  /* Total rows often carry an inline dark-blue background (style="background-color:#006ed4")
     that would make the labels unreadable as a card. Force the clean highlighted-total look
     and override the inherited inline white text on the cells. */
  html.yaaleh-maui-app table.cards-mobile tr.card-total,
  html.yaaleh-maui-app table.cards-mobile tr.card-total[style] {
    background: var(--m-brand-tint) !important;
    border-color: #bcdcff;
  }

  html.yaaleh-maui-app table.cards-mobile tr.card-total td,
  html.yaaleh-maui-app table.cards-mobile tr.card-total td[style] {
    color: var(--m-brand-strong) !important;
    font-weight: 700;
  }

  html.yaaleh-maui-app table.cards-mobile tr.card-total td::before {
    color: var(--m-brand-strong) !important;
    opacity: 0.7;
  }

  /* =====================================================================
     MODALS → full-screen sheet with sticky nav bar + action bar
     (app.css already makes .modal-dialog full width / full height)
     ===================================================================== */
  html.yaaleh-maui-app .modal-content {
    background: var(--m-bg);
  }

  html.yaaleh-maui-app .modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--m-surface);
    border-bottom: 1px solid var(--m-border);
    padding-top: max(14px, env(safe-area-inset-top));
  }

  html.yaaleh-maui-app .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--m-surface);
    border-top: 1px solid var(--m-border);
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    gap: 8px;
  }

  /* Primary action goes full-width in a sheet footer. */
  html.yaaleh-maui-app .modal-footer > .btn {
    flex: 1 1 auto;
  }

  /* =====================================================================
     ACCORDION → iOS collapsible groups
     ===================================================================== */
  html.yaaleh-maui-app .accordion {
    --bs-accordion-border-color: var(--m-border);
    border-radius: var(--m-r);
  }

  html.yaaleh-maui-app .accordion-item {
    border: 1px solid var(--m-border);
    border-radius: var(--m-r) !important;
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--m-surface);
    box-shadow: var(--m-shadow-soft);
  }

  html.yaaleh-maui-app .accordion-button {
    font-family: var(--m-display);
    font-weight: 600;
    color: var(--m-ink);
    padding: 14px 16px;
    border-radius: 0;
  }

  html.yaaleh-maui-app .accordion-button:not(.collapsed) {
    background: var(--m-brand-tint);
    color: var(--m-brand-strong);
    box-shadow: none;
  }

  html.yaaleh-maui-app .accordion-button:focus {
    box-shadow: none;
    border-color: var(--m-border);
  }

  /* =====================================================================
     BUTTONS
     ===================================================================== */
  html.yaaleh-maui-app .btn {
    border-radius: var(--m-r-sm);
    font-weight: 600;
    transition: transform 0.06s ease, background-color 0.12s ease;
  }

  html.yaaleh-maui-app .btn:active {
    transform: scale(0.98);
  }

  html.yaaleh-maui-app .btn-primary {
    background: var(--m-brand);
    border-color: var(--m-brand);
  }

  /* =====================================================================
     BADGES / pills
     ===================================================================== */
  html.yaaleh-maui-app .badge {
    border-radius: 999px;
    padding: 0.35em 0.7em;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  /* =====================================================================
     FORM FIELDS → grouped inset
     ===================================================================== */
  html.yaaleh-maui-app .form-control,
  html.yaaleh-maui-app .form-select {
    min-height: 48px;
    border-radius: var(--m-r-sm);
    border-color: var(--m-border);
    background: var(--m-surface);
    color: var(--m-ink);
  }

  html.yaaleh-maui-app .form-control:focus,
  html.yaaleh-maui-app .form-select:focus {
    border-color: var(--m-brand);
    box-shadow: 0 0 0 3px rgba(0, 119, 212, 0.15);
  }

  html.yaaleh-maui-app .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--m-ink-soft);
  }

  /* =====================================================================
     SEGMENTED CONTROL  (Bootstrap .nav-tabs AND the custom #operationTabs/.op-tab)
     ===================================================================== */
  html.yaaleh-maui-app .nav-tabs,
  html.yaaleh-maui-app #operationTabs,
  html.yaaleh-maui-app .op-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: #eef1f6;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  html.yaaleh-maui-app .nav-tabs::-webkit-scrollbar,
  html.yaaleh-maui-app #operationTabs::-webkit-scrollbar,
  html.yaaleh-maui-app .op-tabs::-webkit-scrollbar {
    display: none;
  }

  html.yaaleh-maui-app .nav-tabs .nav-link,
  html.yaaleh-maui-app #operationTabs .op-tab,
  html.yaaleh-maui-app .op-tabs .op-tab {
    flex: 0 0 auto;
    border: 0 !important;
    border-radius: 999px;
    margin: 0;
    padding: 8px 16px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--m-ink-soft);
    white-space: nowrap;
    background: transparent;
  }

  html.yaaleh-maui-app .nav-tabs .nav-link.active,
  html.yaaleh-maui-app #operationTabs .op-tab.active,
  html.yaaleh-maui-app .op-tabs .op-tab.active {
    background: var(--m-surface);
    color: var(--m-brand-strong);
    box-shadow: var(--m-shadow-soft);
  }

  /* Sticky tab bar inside a sheet. */
  html.yaaleh-maui-app .modal-body .nav-tabs,
  html.yaaleh-maui-app .modal-body #operationTabs,
  html.yaaleh-maui-app .modal-body .op-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
  }

  /* =====================================================================
     PAGINATION → touch pager
     ===================================================================== */
  html.yaaleh-maui-app .pagination {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }

  html.yaaleh-maui-app .page-link {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--m-r-sm);
    border-color: var(--m-border);
    color: var(--m-ink);
  }

  html.yaaleh-maui-app .page-item.active .page-link {
    background: var(--m-brand);
    border-color: var(--m-brand);
  }

  /* =====================================================================
     STICKY SECTION HEADERS (CSS-first large-title-ish feel)
     ===================================================================== */
  html.yaaleh-maui-app .card-header,
  html.yaaleh-maui-app .accordion > .accordion-item > .accordion-header {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  /* =====================================================================
     SIGNATURE — AGING "RISK STRIP"
     Injected by mobile-native.js as the first child of each aging row.
     The original per-bucket <td> cells stay in the DOM (the expanded view).
     ===================================================================== */
  html.yaaleh-maui-app tr.aging-collapsed > td:not(.aging-strip-cell) {
    display: none;
  }

  /* The injected strip cell spans the whole card and carries no label::before. */
  html.yaaleh-maui-app td.aging-strip-cell {
    display: block;
    width: 100%;
    max-width: 100% !important;
    padding: 4px 0;
    border-bottom: 0;
    text-align: left;
  }

  html.yaaleh-maui-app td.aging-strip-cell::before {
    content: none;
  }

  /* The strip already shows the name, so hide the redundant "NOME: …" row in the
     expanded breakdown (the enhancer tags the name cell with .aging-name-cell). */
  html.yaaleh-maui-app table.cards-aging td.aging-name-cell {
    display: none;
  }

  /* Subtle divider between the strip and the per-bucket breakdown when expanded. */
  html.yaaleh-maui-app tr:not(.aging-collapsed) td.aging-strip-cell {
    border-bottom: 1px solid var(--m-border);
    padding-bottom: 10px;
    margin-bottom: 6px;
  }

  html.yaaleh-maui-app .aging-strip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 2px 0 4px;
    cursor: pointer;
  }

  html.yaaleh-maui-app .aging-strip__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  html.yaaleh-maui-app .aging-strip__name {
    font-family: var(--m-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--m-ink);
    line-height: 1.2;
  }

  html.yaaleh-maui-app .aging-strip__total {
    font-family: var(--m-display);
    font-weight: 700;
    font-size: 1.18rem;
    color: var(--m-ink);
    white-space: nowrap;
  }

  html.yaaleh-maui-app .aging-strip__bar {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #eef1f6;
  }

  html.yaaleh-maui-app .aging-strip__seg {
    height: 100%;
    min-width: 0;
  }

  html.yaaleh-maui-app .aging-strip__seg--1 { background: var(--m-age-1); }
  html.yaaleh-maui-app .aging-strip__seg--2 { background: var(--m-age-2); }
  html.yaaleh-maui-app .aging-strip__seg--3 { background: var(--m-age-3); }
  html.yaaleh-maui-app .aging-strip__seg--4 { background: var(--m-age-4); }
  html.yaaleh-maui-app .aging-strip__seg--5 { background: var(--m-age-5); }
  html.yaaleh-maui-app .aging-strip__seg--6 { background: var(--m-age-6); }

  html.yaaleh-maui-app .aging-strip__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--m-ink-soft);
  }

  html.yaaleh-maui-app tr:not(.aging-collapsed) .aging-strip__hint .aging-strip__chev {
    transform: rotate(180deg);
  }

  html.yaaleh-maui-app .aging-strip__chev {
    transition: transform 0.15s ease;
  }

  /* =====================================================================
     KANBAN → segmented status filter + single-column list (decided)
     The horizontal flex deck becomes a vertical list; a sticky segmented
     control (built by mobile-native.js) shows one status at a time.
     ===================================================================== */
  html.yaaleh-maui-app .kanban-board,
  html.yaaleh-maui-app .kanban-columns,
  html.yaaleh-maui-app .kanban-wrapper > .d-flex,
  html.yaaleh-maui-app .kanban-filter-active {
    /* .kanban-filter-active is the marker the JS adds to the REAL board parent (often a bare
       `.d-flex.gap-3`), so target it directly to stack the horizontal deck into a column. */
    flex-direction: column !important;
    gap: 0 !important;
    overflow-x: visible !important;
  }

  html.yaaleh-maui-app .kanban-column {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    margin-bottom: 12px;
  }

  /* When the segmented filter is active, only the chosen status column shows. */
  html.yaaleh-maui-app .kanban-filter-active .kanban-column {
    display: none;
  }

  html.yaaleh-maui-app .kanban-filter-active .kanban-column.kanban-column--shown {
    display: block;
  }

  html.yaaleh-maui-app .kanban-card {
    width: 100% !important;
    border-radius: var(--m-r) !important;
    border: 1px solid var(--m-border) !important;
    box-shadow: var(--m-shadow-soft) !important;
  }

  /* Sticky segmented status filter the JS injects above the board. */
  html.yaaleh-maui-app .kanban-status-filter {
    position: sticky;
    top: calc(env(safe-area-inset-top) + 4px);
    z-index: 6;
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: #eef1f6;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  html.yaaleh-maui-app .kanban-status-filter::-webkit-scrollbar { display: none; }

  html.yaaleh-maui-app .kanban-status-filter button {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--m-ink-soft);
    background: transparent;
    white-space: nowrap;
  }

  html.yaaleh-maui-app .kanban-status-filter button.active {
    background: var(--m-surface);
    color: var(--m-brand-strong);
    box-shadow: var(--m-shadow-soft);
  }

  /* Bottom-anchored sheet variant for filter modals. */
  html.yaaleh-maui-app .modal.mobile-sheet-bottom .modal-dialog {
    align-items: flex-end;
    display: flex;
    min-height: 100%;
  }

  html.yaaleh-maui-app .modal.mobile-sheet-bottom .modal-content {
    min-height: auto;
    border-radius: var(--m-r-lg) var(--m-r-lg) 0 0;
  }

  /* =====================================================================
     FILTER / ACTION BARS → native (Polish 6)
     The universal table→cards lever never touched these horizontal bars, so
     they stayed raw desktop ("100% sem formatação"). Bring them into the
     inset-card + pill vocabulary. All still gated by the media query above.
     ===================================================================== */

  /* Scope-filter "navbar" (Overview etc.) — de-bulk the blue bar into a clean
     stacked filter card with full-width selector buttons. (.topbar excluded.) */
  html.yaaleh-maui-app .navbar:not(.topbar) {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px !important;
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border);
    border-radius: var(--m-r);
    box-shadow: var(--m-shadow-soft);
  }

  html.yaaleh-maui-app .navbar:not(.topbar) .row,
  html.yaaleh-maui-app .navbar:not(.topbar) [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.yaaleh-maui-app .navbar:not(.topbar) .dropdown {
    width: 100% !important;
  }

  html.yaaleh-maui-app .navbar:not(.topbar) .btn-light.dropdown-toggle,
  html.yaaleh-maui-app .navbar:not(.topbar) input.dropdown-toggle {
    width: 100% !important;
    min-height: 46px;
    text-align: left;
    background: #f3f5f9 !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 12px !important;
    color: var(--m-ink, #172033) !important;
    font-weight: 600;
  }

  /* Action / filter button toolbars: wrap instead of overflowing the screen,
     touch-size the buttons. */
  html.yaaleh-maui-app .d-flex.gap-2 {
    flex-wrap: wrap;
  }

  html.yaaleh-maui-app .d-flex.gap-2 > .btn,
  html.yaaleh-maui-app .d-flex.justify-content-between > div > .btn {
    min-height: 42px;
    border-radius: 12px;
  }

  /* Search input-group: full width; keep the suggestion menu on-screen. */
  html.yaaleh-maui-app .input-group {
    width: 100% !important;
  }

  html.yaaleh-maui-app .input-group .dropdown-menu.show {
    max-width: calc(100vw - 24px);
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Long single-token values (CNPJ, codes, IDs) must wrap inside the card, not
     clip off the right edge. */
  html.yaaleh-maui-app table.cards-mobile td {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal !important;
  }

  /* Aging "total" card: was a heavy blue slab (inline #006ed4 + brand tint) — soften to a clean
     white surface; keep it distinct by bold figures + the grand total in brand color. */
  html.yaaleh-maui-app table.cards-mobile tr.card-total,
  html.yaaleh-maui-app table.cards-mobile tr.card-total[style] {
    background: #ffffff !important;
    border: 1px solid #dfe5ee !important;
  }
  html.yaaleh-maui-app table.cards-mobile tr.card-total td,
  html.yaaleh-maui-app table.cards-mobile tr.card-total td[style] {
    color: #172033 !important;
    font-weight: 700;
  }
  html.yaaleh-maui-app table.cards-mobile tr.card-total td:last-child {
    color: #0077d4 !important;
  }

  /* In carded mode the original section backgrounds (<thead class="bg-primary"> and the total
     <tbody style="background:#006ed4">) are still painted as square-cornered slabs sitting behind
     the white rounded rows → blue bleeds at the card's four corners. Drop those slabs; the carded
     rows carry the styling now (card-total stays distinct via its own white-on-blue treatment). */
  html.yaaleh-maui-app table.cards-mobile > thead,
  html.yaaleh-maui-app table.cards-mobile > thead.bg-primary,
  html.yaaleh-maui-app table.cards-mobile > tbody,
  html.yaaleh-maui-app table.cards-mobile > tbody[style] {
    background-color: transparent !important;
  }

  /* No horizontal scroll on CARDED tables (cards-mobile is block, no wide columns). Non-carded
     tables keep their own contained scroll so they never break the whole page sideways. Zero the
     p-3 padding entirely (top/bottom too) — the cards carry their own spacing, so the leftover
     16px top/bottom just read as dead space inside the card. */
  html.yaaleh-maui-app .table-responsive:has(table.cards-mobile) {
    overflow-x: visible !important;
    padding: 0 !important;
  }
  html.yaaleh-maui-app table.cards-mobile {
    width: 100% !important;
    display: block;
  }

  /* Detail/operation modals → full-screen sheet. The size class (modal-xxl/xl/lg) otherwise caps
     the width and the dialog floats offset; force full-bleed (header/footer already sticky above). */
  html.yaaleh-maui-app .modal-dialog,
  html.yaaleh-maui-app .modal-dialog.modal-xxl,
  html.yaaleh-maui-app .modal-dialog.modal-xl,
  html.yaaleh-maui-app .modal-dialog.modal-lg,
  html.yaaleh-maui-app .modal-dialog.modal-dialog-scrollable {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
  }
  html.yaaleh-maui-app .modal-content {
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
  }

  /* ---- Pull-to-refresh (driven by js/pull-refresh.js, native shell only) ----
     A floating pill under the sticky topbar: follows the pull, then spins while
     window.location.reload() re-establishes the Blazor circuit. */
  html.yaaleh-maui-app .yaaleh-ptr {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top) + 8px);
    left: 50%;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--m-border, #e7eaf0);
    box-shadow: 0 6px 18px rgba(19, 33, 68, 0.14);
    opacity: 0;
    transform: translate(-50%, -16px) scale(0.6);
    transition: opacity 120ms ease-out;
    pointer-events: none;
  }

  html.yaaleh-maui-app .yaaleh-ptr--pulling {
    opacity: 1;
    /* transform is driven inline by JS while the finger drags */
    transition: opacity 120ms ease-out;
  }

  html.yaaleh-maui-app .yaaleh-ptr--refreshing {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  html.yaaleh-maui-app .yaaleh-ptr__spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid rgba(0, 119, 212, 0.18);
    border-top-color: #0077d4;
  }

  html.yaaleh-maui-app .yaaleh-ptr--refreshing .yaaleh-ptr__spinner {
    animation: yaaleh-ptr-spin 700ms linear infinite;
  }

  /* ---- Cross-document transition polish (full loads only: login → home, deep
     links, pull-to-refresh). Blazor's enhanced SPA navigations morph the DOM and
     never trigger this; they already have the nav-progress bar + entrance
     animations. Degrades silently where unsupported.
     NOTE: the `@view-transition { navigation: auto }` opt-in canNOT live here — an
     at-rule has no selector, so inside this stylesheet it would also opt in plain
     mobile-web visitors (<=768px) who never get the native shell. It is emitted
     server-side from App.razor ONLY when the request is the native shell. This
     duration override is safe to keep: it only matches under html.yaaleh-maui-app. */
  html.yaaleh-maui-app::view-transition-old(root),
  html.yaaleh-maui-app::view-transition-new(root) {
    animation-duration: 150ms;
  }
}

/* Inert keyframes (no effect on desktop). */
@keyframes aging-strip-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes yaaleh-ptr-spin {
  to { transform: rotate(360deg); }
}