/* ==========================================================================
   WararaDesk — Mobile App Shell
   Experiência estilo aplicativo nativo (< 900px): app bar fixa, tab bar inferior,
   folha "Menu" para rotas secundárias, safe-area iOS, touch targets 44px+.
   Desktop (≥ 900px): sidebar lateral permanece; este arquivo fica inativo.
   ========================================================================== */

:root {
    --mobile-app-bar-h: 52px;
    --mobile-tab-bar-h: 60px;
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-sheet-radius: 20px;
}

/* ---------------------------------------------------------------- Desktop: esconder chrome mobile */
.mobile-app-bar,
.mobile-tab-bar,
.mobile-sheet-overlay,
.sidebar-backdrop {
    display: none;
}

.mobile-fab {
    display: none;
}

.collab-card-list {
    display: none;
}

.finance-ledger-mobile,
.settings-migrations-mobile {
    display: none;
}

.wd-popover-backdrop {
    display: none;
}

@media (max-width: 899px) {

    /* ---- Layout frame --------------------------------------------------- */
    .app-shell {
        flex-direction: column;
        min-height: 100dvh;
    }

    .app-frame {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
    }

    /* Sidebar vira drawer lateral (acessível pelo logo na app bar) */
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(288px, 88vw);
        height: 100dvh;
        z-index: 240;
        transform: translateX(-105%);
        transition: transform .24s var(--ease-out);
        box-shadow: var(--shadow-lg);
        border-right: 1px solid var(--sidebar-border);
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 230;
        background: rgba(8, 10, 20, .48);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .sidebar-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    body.wd-drawer-lock,
    body.wd-sheet-lock {
        overflow: hidden;
    }

    /* ---- App bar -------------------------------------------------------- */
    .mobile-app-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 120;
        height: calc(var(--mobile-app-bar-h) + var(--mobile-safe-top));
        padding: var(--mobile-safe-top) 12px 0;
        background: color-mix(in srgb, var(--color-surface) 88%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .mobile-app-bar-btn {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 11px;
        background: transparent;
        color: var(--color-text-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease, transform .12s ease;
    }

    .mobile-app-bar-btn svg {
        width: 20px;
        height: 20px;
    }

    .mobile-app-bar-btn:active {
        transform: scale(.94);
    }

    .mobile-app-bar-btn:hover,
    .mobile-app-bar-btn:focus-visible {
        background: var(--color-surface-alt);
        color: var(--color-text);
        outline: none;
    }

    .mobile-app-bar-btn[hidden] {
        display: none !important;
    }

    .mobile-app-bar-brand {
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 600;
        color: var(--color-blue);
        padding: 0 4px;
        white-space: nowrap;
    }

    .mobile-app-bar-brand strong {
        color: var(--color-violet);
    }

    .mobile-app-bar-title {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        line-height: 1.2;
    }

    .mobile-app-bar-actions {
        flex-shrink: 0;
        width: 40px;
        min-height: 40px;
    }

    /* ---- Conteúdo principal --------------------------------------------- */
    .content {
        flex: 1;
        padding:
            calc(var(--mobile-app-bar-h) + var(--mobile-safe-top) + 14px)
            16px
            calc(var(--mobile-tab-bar-h) + var(--mobile-safe-bottom) + 16px);
        overflow-x: hidden;
    }

    /* Título duplicado: app bar já mostra — esconde visualmente o h1 da página */
    body.wd-has-app-title .page-header > div:first-child h1,
    body.wd-has-app-title .dash-top > .greeting > h1,
    body.wd-has-app-title .card-view-title,
    body.wd-has-app-title .project-title-row h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    body.wd-has-app-title .page-header,
    body.wd-has-app-title .dash-top > .greeting {
        margin-top: 0;
    }

    body.wd-has-app-title .page-header > div:first-child p.text-muted,
    body.wd-has-app-title .dash-top > .greeting .greeting-eyebrow,
    body.wd-has-app-title .dash-top > .greeting p.text-muted {
        margin-top: 0;
    }

    /* ---- Tab bar inferior ----------------------------------------------- */
    .mobile-tab-bar {
        display: flex;
        align-items: stretch;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 130;
        height: calc(var(--mobile-tab-bar-h) + var(--mobile-safe-bottom));
        padding: 0 8px var(--mobile-safe-bottom);
        background: color-mix(in srgb, var(--color-surface) 92%, transparent);
        border-top: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 52px;
        padding: 6px 4px;
        border: none;
        border-radius: 12px;
        background: transparent;
        color: var(--color-text-dim);
        font: inherit;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .01em;
        text-decoration: none;
        cursor: pointer;
        transition: color .15s ease, background-color .15s ease, transform .12s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-tab svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .mobile-tab:active {
        transform: scale(.96);
    }

    .mobile-tab.is-active {
        color: var(--color-blue);
        background: color-mix(in srgb, var(--color-blue) 10%, transparent);
    }

    .mobile-tab.is-active svg {
        color: var(--color-violet);
    }

    /* ---- Folha "Menu" (bottom sheet) ------------------------------------ */
    .mobile-sheet-overlay {
        display: flex;
        align-items: flex-end;
        position: fixed;
        inset: 0;
        z-index: 250;
        background: rgba(8, 10, 20, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .mobile-sheet-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-sheet {
        width: 100%;
        max-height: min(82dvh, 640px);
        background: var(--color-surface);
        border-radius: var(--mobile-sheet-radius) var(--mobile-sheet-radius) 0 0;
        box-shadow: var(--shadow-lg);
        transform: translateY(100%);
        transition: transform .26s var(--ease-out);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .mobile-sheet-overlay.is-open .mobile-sheet {
        transform: translateY(0);
    }

    .mobile-sheet-handle {
        width: 36px;
        height: 4px;
        border-radius: 99px;
        background: var(--color-border-strong);
        margin: 10px auto 6px;
        flex-shrink: 0;
    }

    .mobile-sheet-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 20px 16px;
        border-bottom: 1px solid var(--color-border);
    }

    .mobile-sheet-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--gradient-brand);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .mobile-sheet-user {
        min-width: 0;
        flex: 1;
    }

    .mobile-sheet-name {
        font-size: 15px;
        font-weight: 700;
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-sheet-role {
        font-size: 12px;
        color: var(--color-text-muted);
        margin-top: 2px;
    }

    .mobile-sheet-nav {
        padding: 8px 12px;
        overflow-y: auto;
        flex: 1;
    }

    .mobile-sheet-link {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 48px;
        padding: 10px 12px;
        border: none;
        border-radius: 12px;
        background: transparent;
        color: var(--color-text);
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background-color .15s ease;
    }

    .mobile-sheet-link svg {
        width: 20px;
        height: 20px;
        color: var(--color-text-muted);
        flex-shrink: 0;
    }

    .mobile-sheet-link:hover,
    .mobile-sheet-link:focus-visible {
        background: var(--color-surface-alt);
        text-decoration: none;
        outline: none;
    }

    .mobile-sheet-link.is-active {
        background: color-mix(in srgb, var(--color-blue) 10%, transparent);
        color: var(--color-blue);
    }

    .mobile-sheet-link.is-active svg {
        color: var(--color-violet);
    }

    .mobile-sheet-divider {
        height: 1px;
        background: var(--color-border);
        margin: 6px 12px;
    }

    .mobile-sheet-foot {
        display: flex;
        gap: 8px;
        padding: 12px 16px calc(12px + var(--mobile-safe-bottom));
        border-top: 1px solid var(--color-border);
    }

    .mobile-sheet-foot .icon-button {
        flex: 1;
        height: 44px;
        border-radius: 12px;
        background: var(--color-surface-alt);
        color: var(--color-text-muted);
        border: 1px solid var(--color-border);
    }

    .mobile-sheet-foot .icon-button span {
        display: inline;
    }

    .mobile-sheet-foot .sidebar-logout {
        flex: 1;
    }

    .mobile-sheet-foot .sidebar-logout .icon-button {
        width: 100%;
    }

    .mobile-app-bar-brand[hidden],
    .mobile-app-bar-title[hidden] {
        display: none !important;
    }

    body.wd-detail-view .mobile-app-bar-title {
        text-align: left;
    }

    body:not(.wd-detail-view) .mobile-app-bar-title:not([hidden]) {
        display: block;
    }

    .dash-top {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 18px;
    }

    .kpi-rail {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        border-radius: var(--radius-lg);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kpi-rail::-webkit-scrollbar {
        display: none;
    }

    .kpi-chip {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .tile-grid-shell {
        border-radius: var(--radius-lg);
        padding: 14px;
        margin-bottom: 18px;
    }

    .tile-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .tile-card {
        padding: 14px;
        border-radius: var(--radius);
    }

    .tile-card-title {
        font-size: 14px;
    }

    .split,
    .dash-split,
    .card-page-grid,
    .finance-layout {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .page-header .btn,
    .page-header .btn-cta {
        width: 100%;
        justify-content: center;
    }

    /* ---- Tabs de projeto (scroll horizontal) ---------------------------- */
    .view-tabs,
    .project-tabs {
        display: flex;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-radius: var(--radius-lg);
    }

    .view-tabs::-webkit-scrollbar,
    .project-tabs::-webkit-scrollbar {
        display: none;
    }

    .view-tab {
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 13px;
    }

    /* ---- Kanban mobile -------------------------------------------------- */
    .board-column,
    .pboard-column {
        width: min(82vw, 320px);
        scroll-snap-align: start;
    }

    .board,
    .pboard {
        scroll-snap-type: x proximity;
        padding-bottom: 8px;
        gap: 12px;
    }

    #wd-unified-board > .pboard {
        min-height: calc(100dvh - var(--mobile-app-bar-h) - var(--mobile-tab-bar-h) - 180px);
    }

    .board-toolbar-bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .board-search {
        flex: 1 1 100%;
        order: -2;
    }

    .board-toolbar-spacer {
        display: none;
    }

    .toolbar-btn-primary,
    .board-toolbar-bar > .btn-cta {
        flex: 1 1 auto;
        min-height: 44px;
    }

    .quick-toggle {
        min-height: 40px;
    }

    /* ---- Cartão (detalhe) ----------------------------------------------- */
    .card-breadcrumb {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .card-page-grid {
        gap: 16px;
    }

    .card-panel {
        padding: 16px;
        border-radius: var(--radius-lg);
        min-width: 0;
    }

    .card-panel .uploader,
    .card-panel .attachment-grid {
        min-width: 0;
    }

    .card-view-title {
        font-size: 18px;
    }

    .card-meta-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* ---- Modais & toasts acima da tab bar ------------------------------- */
    .wd-toast-stack {
        left: 12px;
        right: 12px;
        bottom: calc(var(--mobile-tab-bar-h) + var(--mobile-safe-bottom) + 12px);
        max-width: none;
    }

    .wd-modal-overlay {
        padding: 0;
        align-items: stretch;
    }

    .wd-modal {
        max-width: none;
        min-height: 100dvh;
        border-radius: 0;
        padding: calc(var(--mobile-app-bar-h) + var(--mobile-safe-top) + 12px) 18px 24px;
    }

    .wd-confirm-overlay {
        padding: 16px;
        align-items: flex-end;
    }

    .wd-confirm {
        border-radius: var(--mobile-sheet-radius);
        margin-bottom: calc(var(--mobile-tab-bar-h) + var(--mobile-safe-bottom));
    }

    /* ---- Tabelas & forms ------------------------------------------------ */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -4px;
        padding: 0 4px;
    }

    .form-row {
        flex-direction: column;
    }

    .stat-row {
        grid-template-columns: 1fr 1fr;
    }

    .finance-actions,
    .info-tile-row {
        grid-template-columns: 1fr;
    }

    .finance-hero {
        padding: 18px 16px;
        border-radius: var(--radius-lg);
    }

    /* ---- FAB opcional (criar cartão no board) --------------------------- */
    .mobile-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity .2s ease, transform .2s ease;
        position: fixed;
        right: 16px;
        bottom: calc(var(--mobile-tab-bar-h) + var(--mobile-safe-bottom) + 16px);
        z-index: 110;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--gradient-brand);
        color: #fff;
        box-shadow: var(--shadow-md);
        text-decoration: none;
        transition: transform .15s ease, box-shadow .15s ease;
    }

    .mobile-fab svg {
        width: 22px;
        height: 22px;
    }

    .mobile-fab:active {
        transform: scale(.94);
    }

    /* Esconde promo da sidebar no mobile (redundante com sheet) */
    .sidebar-promo {
        display: none;
    }

    /* ---- Colaboradores: cards no mobile -------------------------------- */
    .collab-card-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .collab-table-desktop {
        display: none !important;
    }

    .collab-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 14px;
        box-shadow: var(--shadow-sm);
    }

    .collab-card-main {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .collab-card-body {
        min-width: 0;
        flex: 1;
    }

    .collab-card-name {
        font-size: 15px;
        font-weight: 700;
        color: var(--color-text);
    }

    .collab-card-email {
        font-size: 12.5px;
        color: var(--color-text-muted);
        margin-top: 2px;
        word-break: break-all;
    }

    .collab-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
        font-size: 12px;
        color: var(--color-text-muted);
    }

    .collab-card-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--color-border);
    }

    .collab-card-actions form {
        flex: 1;
        margin: 0;
    }

    .collab-card-actions .btn {
        width: 100%;
        min-height: 40px;
    }

    /* ---- Cartão: bottom sheet ------------------------------------------- */
    .wd-card-sheet-overlay {
        display: flex;
        align-items: flex-end;
        position: fixed;
        inset: 0;
        z-index: 260;
        background: rgba(8, 10, 20, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .wd-card-sheet-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .wd-card-sheet {
        width: 100%;
        max-height: min(94dvh, 900px);
        background: var(--color-bg);
        border-radius: var(--mobile-sheet-radius) var(--mobile-sheet-radius) 0 0;
        box-shadow: var(--shadow-lg);
        transform: translateY(100%);
        transition: transform .28s var(--ease-out);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .wd-card-sheet-overlay.is-open .wd-card-sheet {
        transform: translateY(0);
    }

    .wd-card-sheet-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        padding: 8px 12px;
        border-bottom: 1px solid var(--color-border);
        background: color-mix(in srgb, var(--color-surface) 92%, transparent);
        backdrop-filter: blur(12px);
    }

    .wd-card-sheet-label {
        flex: 1;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 8px;
    }

    .wd-card-sheet-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 16px calc(16px + var(--mobile-safe-bottom));
    }

    .wd-card-sheet-body .card-page-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wd-card-sheet-body .card-breadcrumb {
        margin-bottom: 10px;
    }

    .wd-card-sheet-loading {
        padding: 48px 20px;
        text-align: center;
        color: var(--color-text-muted);
        font-size: 13px;
    }

    @media (max-width: 420px) {
        .tile-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ---- Chrome oculto com overlays abertos -------------------------------- */
    body.wd-sheet-lock .mobile-tab-bar,
    body.wd-drawer-lock .mobile-tab-bar,
    body.wd-popover-open .mobile-tab-bar {
        transform: translateY(110%);
        pointer-events: none;
    }

    body.wd-sheet-lock .content,
    body.wd-drawer-lock .content,
    body.wd-popover-open .content {
        padding-bottom: calc(var(--mobile-safe-bottom) + 16px);
    }

    body.wd-sheet-lock .mobile-fab,
    body.wd-drawer-lock .mobile-fab,
    body.wd-popover-open .mobile-fab {
        opacity: 0;
        pointer-events: none;
        transform: scale(.85);
    }

    #wd-sidebar-toggle {
        display: none !important;
    }

    body:has(.mobile-fab) .page-header .btn-cta,
    body:has(.mobile-fab) .board-toolbar .btn-cta,
    body:has(.mobile-fab) .dash-top > .btn-cta {
        display: none !important;
    }

    /* ---- Edição touch: lápis sempre visível ----------------------------- */
    @media (hover: none) {
        .card-edit-toggle {
            opacity: 1 !important;
        }
    }

    .task-detail-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .task-detail-actions form {
        margin: 0;
    }

    .task-detail-actions .btn,
    .task-detail-actions .link-button-danger {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    /* ---- Popovers viram bottom sheets ----------------------------------- */
    .wd-popover-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 245;
        background: rgba(8, 10, 20, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .wd-popover-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .wd-popover-wrap .wd-popover.is-open {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: min(78dvh, 640px);
        margin: 0;
        border-radius: var(--mobile-sheet-radius) var(--mobile-sheet-radius) 0 0;
        box-shadow: var(--shadow-lg);
        z-index: 250;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: none !important;
        opacity: 1 !important;
        padding-bottom: var(--mobile-safe-bottom);
    }

    .wd-popover-wrap .wd-popover.is-open::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        margin: 8px auto 4px;
        border-radius: 999px;
        background: var(--color-border-strong);
    }

    /* ---- Financeiro mobile ------------------------------------------------ */
    .finance-ledger-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .settings-migrations-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 16px;
    }

    .finance-table-desktop {
        display: none !important;
    }

    .finance-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .finance-layout aside#finance-new-transaction {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 255;
        max-height: min(88dvh, 720px);
        margin: 0;
        border-radius: var(--mobile-sheet-radius) var(--mobile-sheet-radius) 0 0;
        box-shadow: var(--shadow-lg);
        transform: translateY(105%);
        transition: transform .28s var(--ease-out);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(16px + var(--mobile-safe-bottom));
    }

    .finance-layout aside#finance-new-transaction.is-mobile-open {
        transform: translateY(0);
    }

    .finance-layout aside#finance-new-transaction::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        margin: 8px auto 12px;
        border-radius: 999px;
        background: var(--color-border-strong);
    }

    .finance-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 254;
        background: rgba(8, 10, 20, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .finance-sheet-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .finance-ledger-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 12px 14px;
        box-shadow: var(--shadow-sm);
    }

    .finance-ledger-card-top {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .finance-ledger-card-body {
        flex: 1;
        min-width: 0;
    }

    .finance-ledger-card-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text);
    }

    .finance-ledger-card-meta {
        font-size: 12px;
        color: var(--color-text-muted);
        margin-top: 3px;
    }

    .finance-ledger-card-amount {
        font-size: 14px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .finance-ledger-card-actions {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--color-border);
    }

    /* ---- Settings migrações: cards -------------------------------------- */
    .settings-migrations-table {
        display: none !important;
    }

    .settings-migration-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 12px 14px;
        box-shadow: var(--shadow-sm);
    }

    .settings-migration-card-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--color-text);
        word-break: break-all;
    }

    .settings-migration-card-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        flex-wrap: wrap;
    }

    .settings-migration-card-meta .text-muted {
        font-size: 12px;
    }

    .settings-migration-card form {
        margin-top: 10px;
    }

    /* ---- Kanban touch: mover sem drag ----------------------------------- */
    .kanban-card.wd-kanban-longpress {
        transform: scale(.98);
        box-shadow: var(--shadow-md);
    }

    .wd-kanban-move-overlay {
        display: flex;
        align-items: flex-end;
        position: fixed;
        inset: 0;
        z-index: 260;
        background: rgba(8, 10, 20, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .wd-kanban-move-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .wd-kanban-move-sheet {
        width: 100%;
        max-height: min(70dvh, 520px);
        background: var(--color-bg);
        border-radius: var(--mobile-sheet-radius) var(--mobile-sheet-radius) 0 0;
        box-shadow: var(--shadow-lg);
        transform: translateY(100%);
        transition: transform .28s var(--ease-out);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .wd-kanban-move-overlay.is-open .wd-kanban-move-sheet {
        transform: translateY(0);
    }

    .wd-kanban-move-head {
        padding: 8px 16px 12px;
        border-bottom: 1px solid var(--color-border);
        text-align: center;
    }

    .wd-kanban-move-head::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        margin: 0 auto 10px;
        border-radius: 999px;
        background: var(--color-border-strong);
    }

    .wd-kanban-move-head h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
    }

    .wd-kanban-move-options {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 12px calc(12px + var(--mobile-safe-bottom));
    }

    .wd-kanban-move-option {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 48px;
        padding: 10px 12px;
        border: none;
        border-radius: var(--radius);
        background: transparent;
        color: var(--color-text);
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }

    .wd-kanban-move-option:active {
        background: var(--color-surface-alt);
    }

    .wd-kanban-move-option.is-current {
        color: var(--color-blue);
        background: color-mix(in srgb, var(--color-blue) 8%, transparent);
    }

    .wd-kanban-move-hint {
        font-size: 11px;
        color: var(--color-text-dim);
        text-align: center;
        padding: 6px 16px 10px;
    }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
    .sidebar,
    .mobile-sheet,
    .mobile-sheet-overlay,
    .sidebar-backdrop,
    .wd-card-sheet,
    .wd-card-sheet-overlay {
        transition-duration: .01s;
    }
}