/*
 * Meu Palcco — experiência mobile 10/10
 * Camada final de responsividade. Carregada depois de todos os estilos do sistema
 * para unificar drawer, cabeçalho, cards, formulários, tabelas, modais e dashboard.
 */

:root {
    --mobile-space-1: 4px;
    --mobile-space-2: 8px;
    --mobile-space-3: 12px;
    --mobile-space-4: 16px;
    --mobile-space-5: 20px;
    --mobile-space-6: 24px;
    --mobile-space-8: 32px;
    --mobile-radius-sm: 12px;
    --mobile-radius-md: 16px;
    --mobile-radius-lg: 22px;
    --mobile-radius-xl: 28px;
    --mobile-border: rgba(87, 48, 120, .14);
    --mobile-border-strong: rgba(126, 48, 225, .24);
    --mobile-ink: #24152f;
    --mobile-muted: #716579;
    --mobile-surface: rgba(255, 255, 255, .94);
    --mobile-surface-soft: rgba(250, 247, 253, .96);
    --mobile-shadow: 0 14px 36px rgba(60, 31, 78, .09);
    --mobile-shadow-floating: 0 22px 60px rgba(31, 17, 44, .24);
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.sidebar-backdrop,
.report-panel-backdrop,
.period-filter-mobile-backdrop {
    border: 0;
    padding: 0;
}

.sidebar-backdrop[hidden],
.report-panel-backdrop[hidden],
.period-filter-mobile-backdrop[hidden] {
    display: none !important;
}

@media (max-width: 820px) {
    html {
        min-width: 320px;
        background: #f7f2fb;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-padding-top: 80px;
    }

    body {
        min-width: 320px;
        min-height: var(--app-viewport-height, 100dvh);
        background:
            radial-gradient(circle at 7% 8%, rgba(242, 92, 45, .08), transparent 30%),
            radial-gradient(circle at 94% 16%, rgba(126, 48, 225, .10), transparent 34%),
            #f8f4fb;
        color: var(--mobile-ink);
        font-size: 16px;
        line-height: 1.45;
        overscroll-behavior-x: none;
    }

    body.mobile-sidebar-open,
    body.report-panel-open,
    body.period-filter-open,
    body.has-open-modal {
        overflow: hidden !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        min-width: 0;
    }

    img,
    svg,
    video,
    canvas,
    iframe {
        max-width: 100%;
    }

    button,
    input,
    select,
    textarea,
    a {
        -webkit-tap-highlight-color: transparent;
    }

    button,
    .button,
    .icon-action,
    .menu-button,
    .reminder-button,
    .report-widget__button {
        touch-action: manipulation;
    }

    /* Estrutura geral */
    .app-shell,
    body:not(.has-kanban-page) .app-shell,
    body.has-kanban-page .app-shell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: var(--app-viewport-height, 100dvh);
        grid-template-columns: none !important;
    }

    .main-area,
    body:not(.has-kanban-page) .main-area,
    body.has-kanban-page .main-area {
        width: 100% !important;
        max-width: 100% !important;
        min-height: var(--app-viewport-height, 100dvh);
        margin: 0 !important;
        padding: 0 !important;
    }

    .content,
    body:not(.has-kanban-page) .content,
    body.has-kanban-page .content,
    body.app-modal-body .content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 18px 16px calc(32px + env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
    }

    body.app-modal-body .content {
        padding-top: 12px !important;
        background: #fbf9fc !important;
    }

    .panel,
    .card,
    .resource-list,
    .accounts-page > section,
    .cash-flow-table-panel {
        max-width: 100%;
        border: 1px solid var(--mobile-border) !important;
        border-radius: var(--mobile-radius-lg) !important;
        background: var(--mobile-surface) !important;
        box-shadow: var(--mobile-shadow) !important;
    }

    /* Cabeçalho */
    .topbar,
    body.has-kanban-page .topbar {
        position: relative !important;
        top: auto !important;
        z-index: 560;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        height: calc(64px + env(safe-area-inset-top));
        min-height: calc(64px + env(safe-area-inset-top));
        padding: calc(8px + env(safe-area-inset-top)) 14px 8px !important;
        border-bottom: 1px solid rgba(87, 48, 120, .11);
        background: rgba(255, 255, 255, .92) !important;
        box-shadow: 0 7px 24px rgba(58, 32, 76, .07);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .topbar-spacer {
        display: none !important;
    }

    .menu-button,
    .topbar .menu-button {
        display: inline-flex !important;
        flex: 0 0 46px;
        align-items: center;
        justify-content: center;
        width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(126, 48, 225, .16) !important;
        border-radius: 15px !important;
        background: linear-gradient(145deg, #fff7f1, #f7f1ff) !important;
        color: #5b189d !important;
        box-shadow: 0 8px 22px rgba(88, 35, 121, .10) !important;
    }

    .sidebar-toggle__bars {
        width: 24px !important;
        gap: 4px !important;
    }

    .sidebar-toggle__bars i {
        width: 24px !important;
        height: 3px !important;
        border-radius: 999px;
        background: currentColor !important;
    }

    .topbar-actions {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 8px !important;
        width: auto !important;
        margin-left: auto;
    }

    .reminder-button,
    .report-widget__button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        padding: 0 !important;
        border: 1px solid rgba(126, 48, 225, .15) !important;
        border-radius: 15px !important;
        background: #fff !important;
        color: #281631 !important;
        box-shadow: 0 7px 18px rgba(64, 32, 80, .08) !important;
    }

    .reminder-button svg,
    .report-widget__button svg {
        width: 22px !important;
        height: 22px !important;
    }

    .reminder-badge {
        top: -5px !important;
        right: -4px !important;
        min-width: 22px !important;
        height: 22px !important;
        padding: 0 6px !important;
        border: 2px solid #fff;
        font-size: 12px !important;
        line-height: 18px !important;
    }

    .topbar-actions > .button.secondary[href="/logout"] {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-width: 72px !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 15px !important;
        font-size: 15px !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    /* Drawer */
    .sidebar,
    body:not(.has-kanban-page) .sidebar,
    body.has-kanban-page .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 820 !important;
        display: flex !important;
        flex-direction: column;
        width: min(84vw, 316px) !important;
        max-width: 316px !important;
        height: var(--app-viewport-height, 100dvh) !important;
        min-height: var(--app-viewport-height, 100dvh) !important;
        padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        border-radius: 0 26px 26px 0 !important;
        background: linear-gradient(180deg, #261036 0%, #1d0d2b 100%) !important;
        box-shadow: 26px 0 70px rgba(21, 8, 30, .34) !important;
        transform: translate3d(-105%, 0, 0) !important;
        transition: transform .26s cubic-bezier(.2, .8, .2, 1) !important;
        overflow: hidden !important;
        visibility: visible !important;
    }

    .sidebar.open,
    body:not(.has-kanban-page) .sidebar.open,
    body.has-kanban-page .sidebar.open {
        transform: translate3d(0, 0, 0) !important;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 810;
        display: block;
        width: 100%;
        height: var(--app-viewport-height, 100dvh);
        background: rgba(20, 10, 27, .48);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        animation: mobileBackdropIn .2s ease both;
    }

    .sidebar .brand {
        display: flex !important;
        align-items: center;
        gap: 12px;
        min-height: 58px;
        margin: 0 0 18px !important;
        padding: 0 4px 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .10);
    }

    .sidebar .sidebar-toggle--brand {
        flex: 0 0 46px;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, .18) !important;
        border-radius: 15px !important;
        background: rgba(255, 255, 255, .08) !important;
        color: #fff !important;
    }

    .brand-copy {
        display: grid !important;
        gap: 2px;
        color: #fff !important;
        text-decoration: none;
    }

    .brand-copy strong {
        font-size: 21px !important;
        font-weight: 600 !important;
        letter-spacing: -.02em;
    }

    .brand-copy small {
        max-width: 180px;
        overflow: hidden;
        color: rgba(255, 255, 255, .64) !important;
        font-size: 13px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .side-nav {
        display: grid !important;
        gap: 5px !important;
        padding: 0 2px 12px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .side-nav a {
        display: flex !important;
        align-items: center;
        gap: 13px !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        color: rgba(255, 255, 255, .84) !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        text-decoration: none;
    }

    .side-nav a:hover,
    .side-nav a:focus-visible,
    .side-nav a[aria-current="page"] {
        background: rgba(255, 255, 255, .10) !important;
        color: #fff !important;
        outline: none;
    }

    .side-nav .nav-icon {
        display: inline-flex !important;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
        width: 36px !important;
        height: 36px !important;
        border-radius: 11px !important;
        background: rgba(255, 255, 255, .09) !important;
        color: #fff !important;
    }

    .side-nav .nav-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Tipografia e títulos */
    .page-heading,
    .compact-heading,
    .page-heading--actions-only {
        width: 100%;
        max-width: 100%;
        margin: 0 0 14px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    h1,
    h2,
    h3,
    .page-heading h1,
    .panel h2,
    .accounts-section-header h2 {
        color: var(--mobile-ink);
        font-weight: 500 !important;
        letter-spacing: -.025em;
        overflow-wrap: normal;
    }

    .page-heading h1 {
        font-size: clamp(24px, 7vw, 30px) !important;
        line-height: 1.15 !important;
    }

    .panel h2,
    .dashboard-final-card h2,
    .accounts-section-header h2 {
        font-size: 22px !important;
        line-height: 1.22 !important;
    }

    p,
    small,
    .muted,
    .field-hint {
        overflow-wrap: normal;
    }

    /* Botões e ações */
    .button,
    button.button,
    a.button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        text-align: center;
        white-space: normal;
    }

    .button.compact {
        min-height: 42px !important;
        padding-inline: 13px !important;
        font-size: 14px !important;
    }

    .icon-action,
    .account-action {
        display: inline-flex !important;
        flex: 0 0 44px;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 13px !important;
        box-shadow: 0 7px 18px rgba(51, 27, 66, .08) !important;
    }

    .icon-action svg,
    .account-action svg {
        width: 20px !important;
        height: 20px !important;
    }

    .heading-actions,
    .accounts-heading-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .heading-actions > *,
    .accounts-heading-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .heading-actions > .button.primary:last-child,
    .accounts-heading-actions > .button.primary:last-child {
        grid-column: 1 / -1;
    }

    .heading-actions:has(> :only-child),
    .accounts-heading-actions:has(> :only-child) {
        grid-template-columns: 1fr !important;
    }

    .heading-actions .button,
    .accounts-heading-actions .button {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .heading-actions .button span,
    .accounts-heading-actions .button span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Filtros */
    .filters,
    .filters-panel,
    .cash-flow-filter-panel {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 0 16px !important;
        padding: 16px !important;
        border: 1px solid var(--mobile-border) !important;
        border-radius: var(--mobile-radius-lg) !important;
        background: var(--mobile-surface) !important;
        box-shadow: var(--mobile-shadow) !important;
    }

    .filters[hidden],
    .filters-panel[hidden] {
        display: none !important;
    }

    .filter-actions,
    .cash-flow-filter-panel__actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
        width: 100%;
    }

    .filter-actions > *,
    .cash-flow-filter-panel__actions > * {
        width: 100%;
    }

    /* Modais */
    .modal,
    .iframe-modal,
    .import-modal,
    .pix-qr-modal,
    .action-confirm-modal {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1000 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        width: 100% !important;
        height: var(--app-viewport-height, 100dvh) !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .modal[hidden],
    .iframe-modal[hidden],
    .import-modal[hidden],
    .pix-qr-modal[hidden],
    .action-confirm-modal[hidden] {
        display: none !important;
    }

    .modal-backdrop,
    .iframe-modal__backdrop,
    .import-modal__backdrop,
    .pix-qr-modal__backdrop,
    .action-confirm-backdrop {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(23, 11, 30, .54) !important;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .modal-card,
    .iframe-modal__dialog,
    .import-modal__card,
    .pix-qr-modal__card,
    .action-confirm-card {
        position: relative !important;
        z-index: 1;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        max-height: min(92dvh, 820px) !important;
        margin: 0 !important;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        border-radius: 26px 26px 0 0 !important;
        background: #fff !important;
        box-shadow: var(--mobile-shadow-floating) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        animation: mobileSheetIn .24s cubic-bezier(.2, .8, .2, 1) both;
    }

    .modal-card::before,
    .iframe-modal__dialog::before,
    .import-modal__card::before,
    .pix-qr-modal__card::before,
    .action-confirm-card::before {
        content: "";
        display: block;
        width: 42px;
        height: 4px;
        margin: 0 auto 14px;
        border-radius: 999px;
        background: rgba(72, 49, 82, .20);
    }

    .modal-header,
    .iframe-modal__header,
    .import-modal__header,
    .pix-qr-modal__header,
    .accounts-modal-header {
        position: sticky !important;
        top: -18px !important;
        z-index: 3;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin: 0 -16px 16px !important;
        padding: 0 16px 14px !important;
        border-bottom: 1px solid rgba(87, 48, 120, .09) !important;
        background: rgba(255, 255, 255, .96) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .modal-header h2,
    .iframe-modal__header h2,
    .iframe-modal__header strong,
    .import-modal__header h2,
    .pix-qr-modal__header h2,
    .accounts-modal-header h2 {
        margin: 0 !important;
        font-size: 21px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
    }

    .modal-header p,
    .iframe-modal__header small,
    .import-modal__header p,
    .accounts-modal-header p {
        margin: 4px 0 0 !important;
        color: var(--mobile-muted) !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .iframe-modal__dialog {
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        height: min(94dvh, 900px) !important;
        max-height: 94dvh !important;
        padding: 18px 0 0 !important;
        overflow: hidden !important;
    }

    .iframe-modal__dialog::before {
        margin-bottom: 10px;
    }

    .iframe-modal__header {
        top: 0 !important;
        margin: 0 !important;
        padding: 0 16px 14px !important;
    }

    .iframe-modal__frame {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border: 0 !important;
        background: #fbf9fc !important;
    }

    .action-confirm-card {
        max-height: 76dvh !important;
        text-align: center;
    }

    .action-confirm-icon {
        margin: 0 auto 12px !important;
    }

    /* Reporte */
    .report-panel {
        position: fixed !important;
        inset: auto 0 0 !important;
        z-index: 2700 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        max-height: min(92dvh, 760px) !important;
        margin: 0 !important;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        border-radius: 26px 26px 0 0 !important;
        background: #fff !important;
        box-shadow: var(--mobile-shadow-floating) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        animation: mobileSheetIn .24s cubic-bezier(.2, .8, .2, 1) both;
    }

    .report-panel[hidden] {
        display: none !important;
    }

    .report-panel::before {
        content: "";
        display: block;
        width: 42px;
        height: 4px;
        margin: 0 auto 14px;
        border-radius: 999px;
        background: rgba(72, 49, 82, .20);
    }

    .report-panel__header {
        display: flex !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px !important;
        padding-bottom: 13px !important;
        border-bottom: 1px solid rgba(87, 48, 120, .09) !important;
    }

    .report-panel__header strong {
        font-size: 21px !important;
        font-weight: 500 !important;
    }

    .report-panel__header small {
        display: block;
        margin-top: 3px;
        color: var(--mobile-muted) !important;
        font-size: 13px !important;
    }

    .report-panel__close {
        display: inline-flex !important;
        flex: 0 0 42px;
        align-items: center;
        justify-content: center;
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        border: 1px solid var(--mobile-border) !important;
        border-radius: 13px !important;
        background: #fff !important;
    }

    .report-panel__messages {
        display: none !important;
    }

    .report-panel__form {
        display: grid !important;
        gap: 13px !important;
    }

    .report-panel__upload {
        position: relative;
        display: grid !important;
        gap: 8px;
        min-height: 82px !important;
        padding: 13px !important;
        border: 1px dashed rgba(126, 48, 225, .34) !important;
        border-radius: 15px !important;
        background: #fbf8ff !important;
        color: #6322ad !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    .report-panel__upload input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .report-panel__upload span {
        align-self: center;
        justify-self: center;
        pointer-events: none;
    }

    .report-panel__file-list {
        display: block;
        overflow-wrap: normal;
        word-break: normal;
        color: var(--mobile-muted) !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .report-panel__submit {
        width: 100% !important;
        min-height: 52px !important;
    }

    /* Lembretes */
    .reminder-menu {
        position: fixed !important;
        inset: calc(64px + env(safe-area-inset-top)) 12px auto !important;
        z-index: 2800 !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(70dvh, 560px) !important;
        border: 1px solid var(--mobile-border) !important;
        border-radius: 20px !important;
        background: #fff !important;
        box-shadow: var(--mobile-shadow-floating) !important;
        overflow-y: auto !important;
    }

    /* Paginação */
    .table-pagination,
    .pagination {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 14px !important;
    }

    .pagination-controls,
    .table-pagination__controls {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px !important;
    }

    /* Estados vazios e avisos */
    .empty,
    .compact-empty,
    .dashboard-empty,
    .accounts-empty {
        width: 100%;
        margin: 0 !important;
        padding: 20px 16px !important;
        border: 1px dashed rgba(126, 48, 225, .20) !important;
        border-radius: 16px !important;
        background: #fcf9ff !important;
        color: var(--mobile-muted) !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        text-align: center;
    }

    .alert,
    .validation-summary {
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 13px 14px !important;
        border-radius: 15px !important;
        font-size: 14px !important;
    }

    /* Evita conteúdo encoberto/cortado */
    .kanban-board,
    .kanban-column,
    .dashboard-final-page,
    .accounts-page,
    .resource-list,
    .company-form,
    .crm-edit-tabs,
    .cash-flow-report-page,
    .report-page {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    [style*="width:"] {
        max-width: 100%;
    }
}


@media (max-width: 380px) {
    .content,
    body:not(.has-kanban-page) .content,
    body.has-kanban-page .content {
        padding-inline: 12px !important;
    }

    .topbar {
        padding-inline: 10px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .menu-button,
    .reminder-button,
    .report-widget__button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .topbar-actions > .button.secondary[href="/logout"] {
        min-width: 62px !important;
        padding-inline: 10px !important;
        font-size: 14px !important;
    }

    .dashboard-final-card,
    .dashboard-period-toolbar,
    .resource-list {
        padding: 14px !important;
    }

    .dashboard-final-metric-strip span {
        font-size: 10px !important;
    }

    .dashboard-final-metric-strip strong {
        font-size: 22px !important;
    }

    .dashboard-final-attention-grid {
        grid-template-columns: 1fr !important;
    }

    .music-genre-picker,
    body.app-modal-body .company-form--event-modal .music-genre-picker,
    .crm-event-edit-layout .form-field--music_genres .music-genre-picker {
        grid-template-columns: 1fr !important;
    }

    .responsive-table tbody td,
    .accounts-table tbody td,
    .cash-flow-table tbody td {
        grid-template-columns: minmax(92px, .8fr) minmax(0, 1.2fr);
        gap: 9px !important;
    }
}

@media (min-width: 821px) {
    .sidebar-backdrop,
    .report-panel-backdrop,
    .period-filter-mobile-backdrop {
        display: none !important;
    }
}

@keyframes mobileBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mobileSheetIn {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .modal-card,
    .iframe-modal__dialog,
    .import-modal__card,
    .pix-qr-modal__card,
    .action-confirm-card,
    .report-panel,
    .period-filter-popover,
    .sidebar-backdrop,
    .report-panel-backdrop,
    .period-filter-mobile-backdrop {
        animation: none !important;
        transition: none !important;
    }
}