/* ============================================================================
   SPURA HUB v3 - Mobile Legacy Slice 03
   Mechanical split from mobile-ios.css; preserve load order.
   ============================================================================ */
/* ── Pull-to-refresh ───────────────────────────────────────────── */
.ptr-indicator {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 50%;
    transform: translateX(-50%) translateY(-64px);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-surface, var(--bg-surface));
    border-radius: var(--radius-full);
    box-shadow: 0 4px 16px var(--glass-ink-12);
    font-size: 0.8125rem;
    color: var(--text-secondary, var(--ink-400));
    transition: transform var(--transition-fast), opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}
.ptr-indicator.ptr-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(calc(var(--ptr-progress, 0) * 48px - 32px));
}
.ptr-indicator.ptr-ready {
    color: var(--brand-500, var(--brand-500));
}
.ptr-indicator.ptr-loading .ptr-spinner {
    animation: ptrSpin 0.8s linear infinite;
}
.ptr-spinner {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    rotate: 0turn;
}
@keyframes ptrSpin {
    to { rotate: 1turn; }
}
/* ── Sidebar close button (mobile only) ────────────────────────── */
.sidebar-mobile-close {
    display: none;
}
@media (max-width: 768px) {
    .sidebar-mobile-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        width: 36px;
        height: 36px;
        background: transparent;
        border: 0;
        border-radius: var(--radius-sm);
        color: var(--glass-white-6);
        cursor: pointer;
        flex-shrink: 0;
    }
    .sidebar-mobile-close:hover,
    .sidebar-mobile-close:active {
        background: var(--glass-white-1-2);
        color: var(--glass-white-9);
    }
}
/* ── Signature pad ─────────────────────────────────────────────── */
.sig-pad-wrapper {
    position: relative;
    border: 2px dashed var(--border-color, var(--sp-bg-2));
    border-radius: var(--radius-md, 8px);
    background: var(--bg-surface, var(--bg-surface));
    overflow: hidden;
    touch-action: none;
}
.sig-pad-canvas {
    display: block;
    width: 100%;
    height: 180px;
    cursor: crosshair;
    touch-action: none;
}
.sig-pad-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.75rem;
}
.sig-pad-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, var(--sp-text-3));
    font-size: 0.8125rem;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}
@media (max-width: 768px) {
    .ctr-sign-grid {
        grid-template-columns: 1fr;
    }

    .sig-pad-wrapper {
        min-height: 200px;
    }

    .sig-pad-canvas {
        min-height: 180px;
        touch-action: none;
    }

    body.native-keyboard-visible .sig-pad-wrapper {
        scroll-margin-bottom: calc(var(--native-keyboard-height, 0px) + 1rem);
    }
}

.sig-pad-wrapper.has-signature .sig-pad-hint {
    opacity: 0;
}
/* ── Sidebar: prevent collapsed-state bleed onto mobile ────────── */
@media (max-width: 768px) {
    /* Reset all sidebar-collapsed effects — mobile uses overlay, not collapsed icon strip */
    body.sidebar-collapsed .sidebar {
        width: min(var(--sidebar-width), calc(100vw - var(--safe-area-left) - var(--safe-area-right) - 0.75rem));
    }
    body.sidebar-collapsed .main-content {
        margin-left: 0;
    }
    body.sidebar-collapsed .sidebar-brand-name,
    body.sidebar-collapsed .sidebar-section-title,
    body.sidebar-collapsed .sidebar-link span,
    body.sidebar-collapsed .sidebar-group-toggle span,
    body.sidebar-collapsed .sidebar-group-chevron,
    body.sidebar-collapsed .sidebar-link-badge,
    body.sidebar-collapsed .sidebar-child-link,
    body.sidebar-collapsed .sidebar-user-info {
        display: revert;
    }
}
/* ── Page-header action rows with many buttons ──────────────────── */
/* Use on page-header-actions to get a horizontal scroll strip
   instead of a full-width vertical stack on narrow screens */
@media (max-width: 640px) {
    .page-header-actions--scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-bottom: 2px; /* space for scrollbar */
    }
    .page-header-actions--scroll::-webkit-scrollbar {
        display: none;
    }
    .page-header-actions--scroll > *,
    .page-header-actions--scroll .btn,
    .page-header-actions--scroll form {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content;
        justify-content: flex-start;
    }
}
@media (max-width: 768px) {
    .page-header-actions--scroll {
        gap: 0.375rem;
    }
}
/* ── Location capture row (evidence/create.twig) ────────────────── */
.ev-location-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    flex-wrap: wrap;
}
.ev-location-status {
    font-size: 0.8125rem;
    color: var(--text-secondary, var(--sp-text-3));
    flex: 1;
    min-width: 0;
}
.ev-location-ok  {
    color: var(--green-600);
    font-weight: 500;
}
:root[data-theme='dark'] .ev-location-ok {
    color: var(--green-400);
}
.ev-location-err {
    color: var(--danger-600);
    font-weight: 500;
}
:root[data-theme='dark'] .ev-location-err {
    color: var(--red-400);
}
.ev-location-btn.ev-location-captured {
    color: var(--green-600);
}
:root[data-theme='dark'] .ev-location-btn.ev-location-captured {
    color: var(--green-400);
}
/* ── Filter forms: stack on narrow screens ──────────────────────── */
@media (max-width: 640px) {


}
/* ── Installer picker: single column at ≤640px ──────────────────── */
@media (max-width: 640px) {
    .installer-picker-grid {
        grid-template-columns: 1fr !important;
    }
}
/* ── Assignment show: action-form-inline stack ──────────────────── */
@media (max-width: 480px) {
    .action-form-inline {
        display: flex !important;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }
    .action-form-inline select,
    .action-form-inline .btn {
        width: 100%;
    }
}
/* ── Permission priming cards ───────────────────────────────────── */
/* Geolocation priming (evidence/create) */
.ev-location-priming {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-subtle);
}
.ev-location-priming-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ev-location-priming-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
/* Camera priming (barcode scanner modal) */
.scanner-priming {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 2rem 1.5rem;
    text-align: center;
}
.scanner-priming-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, var(--ink-50));
    margin: 0;
}
.scanner-priming-body {
    font-size: 0.875rem;
    color: var(--text-secondary, var(--sp-text-3));
    margin: 0;
    max-width: 280px;
}
/* ──────────────────────────────────────────────────────────────────
   BOTTOM SHEET
   Usage: <div class="bottom-sheet" id="mySheet"> ... </div>
   JS:    openBottomSheet('mySheet') / closeBottomSheet('mySheet')
   ────────────────────────────────────────────────────────────────── */
/* Backdrop */
.bottom-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--glass-ink-55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--transition-medium);
}
.bottom-sheet-backdrop.is-open {
    display: block;
    opacity: 1;
}
/* Sheet panel */
.bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 501;
    background: var(--ink-900);
    border-radius: var(--radius-xl) 20px 0 0;
    padding-bottom: var(--safe-area-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    max-height: 92svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 -8px 40px var(--glass-ink-4);
}
:root[data-theme='light'] .bottom-sheet,
:root:not([data-theme='dark']) .bottom-sheet {
    background: var(--bg-surface, var(--bg-surface));
    box-shadow: 0 -4px 24px var(--glass-ink-12);
}
.bottom-sheet.is-open {
    transform: translateY(0);
}
/* Drag handle */
.bottom-sheet__handle {
    width: 36px;
    height: 4px;
    background: var(--glass-white-18);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
}
:root[data-theme='light'] .bottom-sheet__handle,
:root:not([data-theme='dark']) .bottom-sheet__handle {
    background: var(--border-color, var(--sp-bg-2));
}
/* Header */
.bottom-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.5rem;
}
.bottom-sheet__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, var(--ink-50));
    margin: 0;
}
.bottom-sheet__close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--glass-white-10);
    border: none;
    color: var(--text-secondary, var(--sp-text-3));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
/* Body */
.bottom-sheet__body {
    padding: 0.75rem 1.25rem 1.25rem;
}
/* Action list (iOS-style menu) */
.bottom-sheet__actions {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem calc(1rem + var(--safe-area-bottom, 0px));
    gap: 0.25rem;
}
.bottom-sheet__action {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    text-decoration: none;
    color: var(--text-primary, var(--ink-50));
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.bottom-sheet__action:active {
    background: var(--glass-white-06);
    transform: scale(0.985);
}
:root[data-theme='light'] .bottom-sheet__action:active,
:root:not([data-theme='dark']) .bottom-sheet__action:active {
    background: var(--bg-secondary, var(--sp-bg-0));
}
.bottom-sheet__action--danger {
    color: var(--danger-400, var(--red-400));
}
.bottom-sheet__action svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.75;
}
.bottom-sheet__action--danger svg {
    opacity: 1;
}
/* Separator */

:root[data-theme='light'] 
/* ──────────────────────────────────────────────────────────────────
   SKELETON SCREENS
   Usage: add 
    100% { background-position: 400px 0; }
}

:root[data-theme='light'] 




/* Row skeleton: icon + two lines of text */


/* Card skeleton */

:root[data-theme='light'] 
/* ============================================================================
   Navigation Progress Bar
   Thin top bar that animates when a same-origin link is clicked.
   ============================================================================ */
.nav-progress-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    z-index: 9999;
    pointer-events: none;
    background: var(--brand-400, var(--brand-500));
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    will-change: transform, opacity;
}
@media (max-width: 768px) {
    .nav-progress-bar {
        display: block;
        top: var(--safe-area-top, 0px);
    }
}
.nav-progress-bar--active {
    opacity: 1;
    /* Animate to ~85 % over 3 s, then stall — completeProgress finishes it */
    animation: navProgressFill 3s cubic-bezier(0.1, 0.6, 0.5, 1) forwards;
}
.nav-progress-bar--done {
    transform: scaleX(1) !important;
    animation: none !important;
    transition: opacity var(--transition-medium);
    opacity: 0;
}
@keyframes navProgressFill {
    0%   { transform: scaleX(0);    }
    60%  { transform: scaleX(0.7);  }
    85%  { transform: scaleX(0.85); }
    100% { transform: scaleX(0.92); }
}
/* ============================================================================
   Confirm Bottom Sheet variant
   Used by spuraConfirmSheet() to replace window.confirm on mobile.
   ============================================================================ */
.bottom-sheet__body--confirm {
    padding-top: 0;
    padding-bottom: 0.5rem;
}
.bottom-sheet__confirm-msg {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
}
.bottom-sheet__actions--dual {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem calc(1rem + var(--safe-area-bottom, 0px));
}
.bottom-sheet__actions--dual .bottom-sheet__action {
    flex: 1;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    min-height: 48px;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.bottom-sheet__actions--dual .bottom-sheet__action:active {
    opacity: 0.72;
    transform: scale(0.97);
}
.bottom-sheet__action--cancel {
    background: var(--bg-tertiary, var(--glass-slate-14));
    color: var(--text-secondary);
}
.bottom-sheet__action--primary {
    background: var(--brand-500, var(--brand-500));
    color: var(--bg-surface);
}
:root[data-theme='light'] .bottom-sheet__action--cancel,
:root:not([data-theme='dark']) .bottom-sheet__action--cancel {
    background: var(--bg-secondary, var(--ink-50));
    color: var(--text-secondary, var(--ink-400));
}
/* ============================================================================
   TABLE ROW SWIPE (≤640px — reveal actions like Mail.app)
   ============================================================================ */
.swipeable-row {
    position: relative;
    overflow: hidden;
}
.swipeable-row__content {
    position: relative;
    z-index: 2;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    touch-action: pan-y;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.swipeable-row__actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: stretch;
    pointer-events: none;
}
.swipeable-row--open .swipeable-row__actions {
    pointer-events: auto;
}
.swipeable-row__action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 0 1rem;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bg-surface);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    gap: 0.375rem;
    -webkit-tap-highlight-color: transparent;
}
.swipeable-row__action:active {
    opacity: 0.85;
    transform: scale(0.97);
}




:root[data-theme='light'] 
.swipeable-row__action svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* ============================================================================
   Bottom nav: dynamic item count support (4 or 5 items)
   ============================================================================ */
@media (max-width: 768px) {
    /* 5-item nav: slightly tighter labels */
    .mobile-bottom-nav[data-item-count="5"] .mobile-bottom-nav__item span {
        font-size: 0.625rem;
    }
    .mobile-bottom-nav[data-item-count="5"] .mobile-bottom-nav__item svg {
        width: 20px;
        height: 20px;
    }
}
/* ============================================================================
   View Transitions (Safari 18+ / Chrome 126+)
   Smooth cross-fade + subtle slide on same-origin navigations.
   ============================================================================ */
@view-transition {
    navigation: auto;
}
/* Subtle slide-from-right feel for forward navigation,
   slide-from-left for back navigation */
::view-transition-old(root) {
    animation: spura-vt-fade-out 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(root) {
    animation: spura-vt-fade-in 0.22s cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes spura-vt-fade-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-12px);
    }
}
@keyframes spura-vt-fade-in {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Smooth page-header entrance */
@supports (view-transition-name: none) {
    .page-header-title {
        view-transition-name: page-title;
    }
    .page-header {
        view-transition-name: page-header;
    }
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
    @supports (view-transition-name: none) {
        .page-header-title,
        .page-header {
            view-transition-name: none;
        }
    }
}
/* ============================================================================
   Offline Banner
   Fixed red banner at the top when body.spura-offline is toggled via
   @capacitor/network or browser online/offline events.
   ============================================================================ */
.spura-offline-banner {
    display: none;
    position: fixed;
    top: var(--safe-area-top, 0);
    left: 0;
    right: 0;
    z-index: 9998;
    background: var(--danger-500, var(--danger-600));
    color: var(--bg-surface);
    padding: calc(0.375rem + var(--safe-area-top, 0px)) 1rem 0.375rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
}
body.spura-offline .spura-offline-banner {
    display: block;
}

/* ── Continuity Banner ──────────────────────────────────────────── */
/* Displays when local spura:* drafts/checklists are pending (offline OR online). */
.spura-continuity-banner {
    display: flex;
    position: fixed;
    top: var(--safe-area-top, 0);
    left: 0;
    right: 0;
    z-index: 9997;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: var(--warning-50);
    border-bottom: 1px solid var(--warning-200);
    color: var(--warning-800, var(--warning-600));
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 550;
}

:root[data-theme="dark"] .spura-continuity-banner {
    background: var(--glass-hex-1a1507);
    border-color: var(--glass-warning-light-18);
    color: var(--yellow-300);
}

.spura-continuity-banner[hidden] {
    display: none;
}

.spura-continuity-banner__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.spura-continuity-banner__text {
    flex: 1 1 auto;
    min-width: 0;
}

.spura-continuity-banner__action {
    flex-shrink: 0;
    border: 1px solid var(--warning-300);
    border-radius: var(--radius-sm);
    background: var(--glass-warning-light-1);
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.spura-continuity-banner__action:hover {
    background: var(--glass-warning-light-2);
}

.spura-continuity-banner__action[hidden],
.spura-continuity-banner__secondary[hidden] {
    display: none;
}

.spura-continuity-banner__secondary {
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.spura-continuity-banner__secondary:hover {
    opacity: 0.85;
}

.spura-continuity-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9996;
    background: color-mix(in srgb, var(--ink-950) 78%, transparent);
}

.spura-continuity-panel-backdrop[hidden],
.spura-continuity-panel[hidden] {
    display: none;
}

.spura-continuity-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    max-height: min(85vh, 36rem);
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    padding-bottom: calc(var(--safe-area-bottom, 0px) + 0.5rem);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:root[data-theme='dark'] .spura-continuity-panel {
    background: var(--bg-surface);
    border-top-color: var(--border-color, var(--border-subtle));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.spura-continuity-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}

.spura-continuity-panel__eyebrow {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.spura-continuity-panel__title {
    margin: 0.125rem 0 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
}

.spura-continuity-panel__close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-muted, var(--bg-muted));
    color: var(--text-secondary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.spura-continuity-panel__list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--bg-surface);
    -webkit-overflow-scrolling: touch;
}

.spura-continuity-panel__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.spura-continuity-panel__item:last-child {
    border-bottom: 0;
}

.spura-continuity-panel__item-main {
    flex: 1 1 auto;
    min-width: 0;
}

.spura-continuity-panel__item-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--text-primary);
}

.spura-continuity-panel__item-summary {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.spura-continuity-panel__item-kind {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--warning-600);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--warning-500) 12%, transparent);
}

.spura-continuity-panel__item-action {
    flex-shrink: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--brand-600);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.375rem 0.625rem;
    cursor: pointer;
    white-space: nowrap;
}

.spura-continuity-panel__empty {
    margin: 0;
    padding: 1.25rem 1rem 1.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: center;
}

.spura-continuity-banner__dismiss {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spura-continuity-banner__dismiss:hover {
    opacity: 0.85;
}

body.spura-continuity-active {
    --spura-continuity-banner-height: 2.75rem;
}

body.spura-continuity-active .topbar {
    top: calc(var(--safe-area-top, 0px) + var(--spura-continuity-banner-height));
}

body.spura-continuity-active .sidebar {
    top: calc(var(--safe-area-top, 0px) + var(--spura-continuity-banner-height));
}

body.spura-continuity-panel-open {
    overflow: hidden;
}

body.spura-continuity-panel-open .page-content,
body.spura-continuity-panel-open .topbar,
body.spura-continuity-panel-open .sidebar {
    visibility: hidden;
    pointer-events: none;
}

body.spura-continuity-panel-open .spura-continuity-panel-backdrop {
    z-index: 10050;
    background: color-mix(in srgb, var(--ink-950) 84%, transparent);
}

body.spura-continuity-panel-open .spura-continuity-panel {
    z-index: 10051;
}

body.spura-continuity-panel-open .sidebar,
body.spura-continuity-panel-open .mobile-bottom-nav {
    z-index: 90;
}

body.spura-continuity-panel-open .spura-continuity-panel__close {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    body.spura-continuity-active .mobile-topbar-heading {
        margin-top: var(--spura-continuity-banner-height);
    }

    body.spura-continuity-panel-open .spura-continuity-panel {
        top: max(var(--safe-area-top, 0px), env(safe-area-inset-top, 0px));
        bottom: calc(56px + var(--safe-area-bottom, 0px));
        max-height: none;
        height: auto;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    #quoteForm .card-footer,
    #quoteEditForm .card-footer {
        scroll-margin-bottom: var(--mobile-page-nav-clearance, calc(4.75rem + var(--safe-area-bottom, 0px)));
    }
}

@media (min-width: 769px) {
    body.spura-continuity-panel-open .spura-continuity-panel {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(32rem, calc(100vw - 2rem));
        max-height: min(80vh, 40rem);
        transform: translate(-50%, -50%);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-subtle);
    }
}
/* ============================================================================
   iOS Safe Area — Direct env() Override
   Bypasses CSS variable injection from native code (old Capacitor bridge).
   env(safe-area-inset-*) cannot be overridden by JavaScript; var() can.
   Scoped to iOS/WKWebView via @supports (-webkit-touch-callout: none).
   ============================================================================ */
@supports (-webkit-touch-callout: none) {
    body.app-body {
        /* padding-top removed: the topbar now extends behind the status bar
           and handles the safe-area-inset-top via its own padding-top.
           This eliminates the seam/white-line between the status bar and the topbar. */
        padding-top: 0px !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }
    .topbar {
        /* Extend behind the iOS status bar — iOS native navigation bar pattern.
           padding-top pushes the topbar's flex content below the notch/Dynamic Island.
           The frosted-glass background covers the full top including the status bar area,
           eliminating the visible seam that appeared between the body background and the topbar. */
        top: 0 !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
    }
    .sidebar {
        top: env(safe-area-inset-top, 0px) !important;
        bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    .mobile-bottom-nav {
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    .spura-offline-banner {
        top: env(safe-area-inset-top, 0px) !important;
        padding-top: calc(0.375rem + env(safe-area-inset-top, 0px)) !important;
    }
    .mobile-hub-panel,
    .mobile-inbox-panel {
        top: 0 !important;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    }
}
/* ============================================================================
   GitHub-quality Mobile Light Theme
   Clean white/f6f8fa canvas, pill-style bottom nav, frosted topbar.
   Applies only on narrow viewports in light mode.
   ============================================================================ */
@media (max-width: 768px) {
    /* ── Page canvas: neutral gray instead of the teal/blue gradient ── */
    :root[data-theme='light'] body.app-body,
    :root:not([data-theme='dark']) body.app-body,
    :root[data-theme='light'] .page-content,
    :root:not([data-theme='dark']) .page-content,
    :root[data-theme='light'] .spura-inbox-container,
    :root:not([data-theme='dark']) .spura-inbox-container {
        background: var(--gray-100) !important;
        background-attachment: unset !important;
    }
    :root[data-theme='light'] .mobile-view-header--inbox,
    :root:not([data-theme='dark']) .mobile-view-header--inbox {
        background: var(--gray-50) !important;
        box-shadow: var(--shadow-none, none) !important;
    }
    :root[data-theme='light'] .mobile-view-eyebrow,
    :root:not([data-theme='dark']) .mobile-view-eyebrow {
        color: var(--glass-ink-78);
    }
    :root[data-theme='light'] .mobile-view-title,
    :root:not([data-theme='dark']) .mobile-view-title {
        color: var(--ink-950);
    }
    :root[data-theme='light'] .mobile-view-subtitle,
    :root:not([data-theme='dark']) .mobile-view-subtitle {
        color: var(--glass-ink-82);
    }
    :root[data-theme='light'] .mobile-count-badge,
    :root:not([data-theme='dark']) .mobile-count-badge {
        border-color: var(--glass-slate-18);
        box-shadow: var(--shadow-none, none);
    }
    :root[data-theme='light'] .mobile-count-badge--empty,
    :root:not([data-theme='dark']) .mobile-count-badge--empty {
        background: var(--glass-slate-10);
        color: var(--ink-600);
    }
    :root[data-theme='light'] .mobile-count-badge--low,
    :root:not([data-theme='dark']) .mobile-count-badge--low {
        background: var(--glass-brand-11);
        color: var(--brand-600);
    }
    :root[data-theme='light'] .mobile-count-badge--medium,
    :root:not([data-theme='dark']) .mobile-count-badge--medium {
        background: var(--glass-warning-11);
        color: var(--color-warning-dark);
    }
    :root[data-theme='light'] .mobile-count-badge--high,
    :root:not([data-theme='dark']) .mobile-count-badge--high {
        background: var(--glass-danger-11);
        color: var(--red-700);
    }
    .mobile-home-panel {
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }
    /* ── Topbar: softer glass treatment for mobile ───────────────────── */
    :root[data-theme='light'] .topbar,
    :root:not([data-theme='dark']) .topbar {
        background: var(--glass-misc-242244247-78) !important;
        border-bottom: 1px solid var(--glass-ink-05) !important;
        -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
        backdrop-filter: saturate(180%) blur(24px) !important;
        box-shadow: var(--shadow-none, none) !important;
    }
    :root[data-theme='light'] .mobile-topbar-avatar,
    :root:not([data-theme='dark']) .mobile-topbar-avatar {
        width: 2rem;
        height: 2rem;
        font-size: 0.82rem;
        box-shadow: var(--shadow-none, none);
    }
    :root[data-theme='dark'] .topbar {
        background: var(--glass-misc-122448-72) !important;
        border-bottom: 1px solid var(--glass-white-08) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
        backdrop-filter: saturate(180%) blur(20px) !important;
        box-shadow: 0 10px 30px var(--glass-ink-22) !important;
    }
    /* ── Bottom nav: solid dock (utilitarian; no floating glass) ───── */
    :root {
        --mobile-bottom-nav-offset: 56px;
    }

    .mobile-bottom-nav {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: calc(var(--mobile-bottom-nav-offset) + var(--safe-area-bottom, 0px)) !important;
        padding: 0 0 var(--safe-area-bottom, 0px) !important;
        border-radius: var(--radius-none, 0) !important;
        border: 0 !important;
        border-top: 1px solid var(--border-color) !important;
        background: var(--bg-primary) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: var(--shadow-none, none) !important;
        overflow: visible !important;
        isolation: auto !important;
        z-index: 140 !important;
    }

    .mobile-bottom-nav::before {
        content: none;
    }

    :root[data-theme='light'] .mobile-bottom-nav,
    :root:not([data-theme='dark']) .mobile-bottom-nav {
        background: var(--bg-surface) !important;
        border-top-color: var(--border-color) !important;
        box-shadow: var(--shadow-none, none) !important;
    }

    :root[data-theme='dark'] .mobile-bottom-nav {
        background: var(--bg-primary) !important;
        border-top-color: var(--border-color) !important;
    }

    :root[data-theme='light'] .mobile-hub-panel,
    :root:not([data-theme='dark']) .mobile-hub-panel,
    :root[data-theme='light'] .mobile-inbox-panel,
    :root:not([data-theme='dark']) .mobile-inbox-panel {
        bottom: calc(var(--mobile-bottom-nav-offset) + var(--safe-area-bottom, 0px)) !important;
    }

    .mobile-hub-panel,
    .mobile-inbox-panel {
        height: auto !important;
        max-height: none !important;
        bottom: calc(var(--mobile-bottom-nav-offset) + var(--safe-area-bottom, 0px)) !important;
    }

    @supports (-webkit-touch-callout: none) {
        .mobile-hub-panel,
        .mobile-inbox-panel {
            bottom: calc(var(--mobile-bottom-nav-offset) + env(safe-area-inset-bottom, 0px)) !important;
        }
    }
    .mobile-bottom-nav__item {
        min-height: 48px !important;
        gap: 3px !important;
        color: var(--glass-ice-72) !important;
        background: transparent !important;
        border-radius: var(--sp-radius-md) !important;
        font-size: 10px !important;
        font-weight: 650 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    .mobile-bottom-nav__item::before {
        content: none !important;
    }

    .mobile-bottom-nav__icon-wrap::after {
        content: none;
    }

    .mobile-bottom-nav__item.active .mobile-bottom-nav__icon-wrap::after,
    body.cmd-palette-active .mobile-bottom-nav__item[data-nav-action="search"] .mobile-bottom-nav__icon-wrap::after,
    body.mobile-inbox-open .mobile-bottom-nav__item[data-nav-action="inbox"] .mobile-bottom-nav__icon-wrap::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0.05rem;
        width: 0.28rem;
        height: 0.28rem;
        margin-left: -0.14rem;
        border-radius: var(--radius-full);
        background: var(--brand-500);
        box-shadow: var(--shadow-none, none);
        pointer-events: none;
    }

    .mobile-bottom-nav__item.active {
        color: var(--brand-500) !important;
        background: transparent !important;
    }

    .mobile-bottom-nav__item:hover::before,
    .mobile-bottom-nav__item:active::before,
    .mobile-bottom-nav__item.active::before,
    body.cmd-palette-active .mobile-bottom-nav__item[data-nav-action="search"]::before {
        opacity: 0 !important;
    }

    .mobile-bottom-nav__badge {
        min-width: 0.95rem !important;
        height: 0.95rem !important;
        padding: 0 !important;
        font-size: 0 !important;
        top: -0.12rem !important;
        right: -0.18rem !important;
    }

    .mobile-bottom-nav__badge::after {
        content: "";
        display: block;
        width: 0.45rem;
        height: 0.45rem;
        border-radius: var(--radius-full);
        background: var(--danger-500);
    }

    .mobile-bottom-nav__item:hover,
    .mobile-bottom-nav__item:active {
        color: var(--text-primary) !important;
    }
    .mobile-bottom-nav__item .app-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 1rem !important;
    }
    .mobile-bottom-nav__item span,
    .mobile-bottom-nav__item .app-icon {
        position: relative;
        z-index: 1;
    }
    .mobile-bottom-nav__item:hover,
    .mobile-bottom-nav__item:active {
        color: var(--text-primary) !important;
        background: transparent !important;
    }
    .mobile-bottom-nav__item.active {
        color: var(--brand-600, var(--brand-500)) !important;
        text-shadow: none;
        background: transparent !important;
    }

    body.cmd-palette-active .mobile-bottom-nav__item[data-nav-action="search"] {
        color: var(--brand-600, var(--brand-500)) !important;
        background: transparent !important;
    }
    :root[data-theme='light'] .mobile-bottom-nav__item,
    :root:not([data-theme='dark']) .mobile-bottom-nav__item {
        color: var(--ink-400) !important;
    }
    .mobile-home-panel {
        margin-bottom: 1.75rem;
    }
    :root[data-theme='light'] .mobile-bottom-nav__item:hover,
    :root:not([data-theme='dark']) .mobile-bottom-nav__item:hover,
    :root[data-theme='light'] .mobile-bottom-nav__item:active,
    :root:not([data-theme='dark']) .mobile-bottom-nav__item:active,
    :root[data-theme='light'] .mobile-bottom-nav__item.active,
    :root:not([data-theme='dark']) .mobile-bottom-nav__item.active,
    :root[data-theme='light'] body.cmd-palette-active .mobile-bottom-nav__item[data-nav-action="search"],
    :root:not([data-theme='dark']) body.cmd-palette-active .mobile-bottom-nav__item[data-nav-action="search"] {
        color: var(--brand-700, var(--brand-600)) !important;
    }
    /* ── Home panels: solid utilitarian cards (no glass blur on Inicio) ─ */
    .mobile-home-greeting,
    .mobile-home-alerts,
    .mobile-home-card {
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--shadow-xs) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    :root[data-theme='dark'] .mobile-home-greeting,
    :root[data-theme='dark'] .mobile-home-alerts,
    :root[data-theme='dark'] .mobile-home-card {
        background: var(--bg-secondary) !important;
        border-color: var(--border-color) !important;
        box-shadow: var(--shadow-none, none) !important;
    }
}

/* ============================================================================
   ROW ACTION SHEET — data-row-menu trigger + action items
   Trigger button is visible on mobile only; desktop shows .row-actions-desktop.
   ============================================================================ */

/* Hide desktop icon buttons on mobile */
@media (max-width: 768px) {
    .row-actions-desktop {
        display: none !important;
    }
}

/* Hide trigger button on desktop */
.row-menu-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min, 44px);
    height: var(--touch-target-min, 44px);
    min-width: var(--touch-target-min, 44px);
    min-height: var(--touch-target-min, 44px);
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary, var(--ink-400));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.row-menu-trigger:active {
    background: var(--glass-white-06);
    color: var(--text-primary);
}
@media (max-width: 768px) {
    .row-menu-trigger {
        display: inline-flex;
    }
}

/* Action items inside the row action sheet */
.row-action-sheet__body {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem calc(1rem + var(--safe-area-bottom, 0px));
    gap: 0.125rem;
}
.row-action-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-height: var(--touch-target-min, 44px);
    padding: 0.8125rem 1rem;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    text-decoration: none;
    color: var(--text-primary, var(--ink-50));
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.row-action-item:hover,
.row-action-item:active {
    background: var(--glass-white-06);
}
:root[data-theme='light'] .row-action-item:hover,
:root:not([data-theme='dark']) .row-action-item:hover,
:root[data-theme='light'] .row-action-item:active,
:root:not([data-theme='dark']) .row-action-item:active {
    background: var(--bg-secondary, var(--sp-bg-0));
}
.row-action-item--primary {
    color: var(--brand-400, var(--brand-500));
}
:root[data-theme='light'] .row-action-item--primary,
:root:not([data-theme='dark']) .row-action-item--primary {
    color: var(--brand-600, var(--brand-500));
}
.row-action-item--danger {
    color: var(--danger-400, var(--red-400));
}
.row-action-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    opacity: 0.8;
}
.row-action-item--danger .row-action-item__icon {
    opacity: 1;
}
.row-action-item__label {
    flex: 1;
    min-width: 0;
}
.row-action-item__chevron {
    color: var(--text-secondary, var(--ink-400));
    opacity: 0.5;
    flex-shrink: 0;
}