@media (max-width: 768px) {
    html[data-theme="monday"] header {
        grid-template-columns: 1fr;
        padding-inline: 18px;
    }

    html[data-theme="monday"] .page-clients header {
        grid-template-columns: 1fr;
    }

    html[data-theme="monday"] header nav {
        grid-row: 2;
        justify-content: flex-start;
    }

    html[data-theme="monday"] header .controls {
        grid-column: 1;
    }

    html[data-theme="monday"] .page-clients .sync-usage-button {
        grid-row: 3;
        grid-column: 1;
        width: 100%;
        min-height: 44px;
        justify-self: stretch;
    }

    html[data-theme="monday"] .charts,
    html[data-theme="monday"] .grid-campos {
        grid-template-columns: 1fr;
    }

    html[data-theme="monday"] .grid-campos > [style*="grid-column"] {
        grid-column: auto !important;
    }

    html[data-theme="monday"] .page-projections .tooltip::after {
        right: 0;
        left: auto;
        width: min(260px, calc(100vw - 32px));
        transform: none;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    html[data-theme="monday"] body.page-admin {
        padding-bottom: 72px;
    }

    html[data-theme="monday"] header {
        position: static;
        padding: 14px 14px 0;
    }

    html[data-theme="monday"] header nav {
        position: fixed;
        inset: auto 0 0;
        z-index: 50;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px !important;
        padding: 8px;
        border-top: 1px solid var(--border);
        background: var(--surface);
        box-shadow: 0 -4px 12px rgb(0 0 0 / 0.08);
    }

    html[data-theme="monday"] header nav a,
    html[data-theme="monday"] header nav button {
        width: 100%;
        min-height: 44px;
        padding: 6px 4px !important;
        border-radius: var(--radius-control) !important;
        font-size: 11px !important;
        text-align: center;
    }

    html[data-theme="monday"] header nav form {
        margin: 0 !important;
    }

    html[data-theme="monday"] .brand-link,
    html[data-theme="monday"] .margin-toggle {
        min-height: 44px;
    }

    html[data-theme="monday"] header .controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 10px;
    }

    html[data-theme="monday"] .controls .sep,
    html[data-theme="monday"] .controls > span:not(.sep) {
        display: none;
    }

    html[data-theme="monday"] .controls button,
    html[data-theme="monday"] .controls select,
    html[data-theme="monday"] .controls input {
        width: 100%;
        min-width: 0 !important;
        min-height: 44px;
    }

    html[data-theme="monday"] .controls button,
    html[data-theme="monday"] #app-filter {
        grid-column: 1 / -1;
    }

    html[data-theme="monday"] .page-projections .component-head,
    html[data-theme="monday"] .page-projections .component-row {
        grid-template-columns: minmax(0, 1fr) 52px 58px 46px 32px !important;
        gap: 4px !important;
        padding-inline: 6px !important;
    }

    html[data-theme="monday"] .page-projections .component-head > span {
        min-width: 0;
        font-size: 9px !important;
        overflow-wrap: anywhere;
    }

    html[data-theme="monday"] .page-projections .component-row input[type="number"] {
        width: 48px !important;
        padding-inline: 4px !important;
    }

    html[data-theme="monday"] .cards {
        grid-template-columns: 1fr 1fr;
        padding: 14px;
    }

    html[data-theme="monday"] .cards .card {
        min-width: 0;
        padding: 14px;
    }

    html[data-theme="monday"] .charts,
    html[data-theme="monday"] .table-section {
        padding-inline: 14px;
    }

    html[data-theme="monday"] .cost-bar {
        padding-inline: 14px;
    }

    html[data-theme="monday"] .api-hint {
        width: calc(100% - 28px);
    }

    html[data-theme="monday"] table.responsive-table,
    html[data-theme="monday"] table.responsive-table tbody,
    html[data-theme="monday"] table.responsive-table tr,
    html[data-theme="monday"] table.responsive-table td {
        display: block;
        width: 100%;
    }

    html[data-theme="monday"] table.responsive-table {
        border-left-width: 6px;
    }

    html[data-theme="monday"] table.responsive-table thead {
        display: none;
    }

    html[data-theme="monday"] table.responsive-table tr {
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
    }

    html[data-theme="monday"] table.responsive-table tr:last-child {
        border-bottom: 0;
    }

    html[data-theme="monday"] table.responsive-table td {
        display: grid;
        grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1fr);
        min-height: 36px;
        height: auto;
        padding: 7px 4px;
        border: 0;
        overflow-wrap: anywhere;
    }

    html[data-theme="monday"] table.responsive-table td::before {
        content: attr(data-label);
        color: var(--text-2);
        font-size: 12px;
        font-weight: 500;
    }

    html[data-theme="monday"] .page-clients .payment-link-cell {
        max-width: none;
        overflow: hidden;
    }

    html[data-theme="monday"] .page-clients .payment-link-value {
        min-width: 0;
    }

    html[data-theme="monday"] table.responsive-table td[colspan] {
        display: block;
        text-align: center;
    }

    html[data-theme="monday"] table.responsive-table td[colspan]::before {
        content: none;
    }

    html[data-theme="monday"] .clients-table td:has(> .badge.active),
    html[data-theme="monday"] .clients-table td:has(> .badge.suspended) {
        padding: 7px 4px;
    }

    html[data-theme="monday"] .clients-table .badge.active,
    html[data-theme="monday"] .clients-table .badge.suspended {
        min-height: 32px;
        border-radius: var(--radius-control);
    }

    html[data-theme="monday"] .modal-fondo {
        align-items: flex-end;
        padding: 0;
    }

    html[data-theme="monday"] .modal {
        width: 100%;
        max-height: 94vh;
        margin: 0;
        padding: 20px 16px;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 12px 12px 0 0;
    }

    html[data-theme="monday"] .page-login .card {
        padding: 24px 20px;
    }

    html[data-theme="monday"] .account-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    html[data-theme="monday"] .cards {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="monday"] *,
    html[data-theme="monday"] *::before,
    html[data-theme="monday"] *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}