/*
 * Responsividade global v122
 * Complementa os CSS específicos sem alterar o layout desktop.
 * Aplicado a todas as páginas HTML/Thymeleaf do sistema.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

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

input, select, textarea, button {
    max-width: 100%;
    font: inherit;
}

@media (max-width: 900px) {
    html, body {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        overflow-x: hidden;
    }

    body {
        margin: 0;
    }

    .app-layout,
    .main-area,
    .container,
    .screen-container,
    .system-user-container,
    .budget-main,
    .budget-container,
    .svg-page-main-v119,
    .control-panel-content-v119,
    .login-screen,
    .login-main,
    .order-main-v111,
    .product-main-v116 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .container,
    .screen-container,
    .system-user-container,
    .budget-container,
    .svg-page-main-v119,
    .control-panel-content-v119,
    .order-main-v111,
    .product-main-v116 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .dashboard-header,
    .centered-header,
    .page-title-line,
    .svg-page-title-v119,
    .control-panel-title-v119 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    .dashboard-header h1,
    .centered-header h1,
    .page-title-line h1,
    .svg-page-title-v119 h1,
    .control-panel-title-v119 h1 {
        max-width: 100% !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    form,
    fieldset,
    section,
    article,
    nav,
    .field,
    .reference-cell-v85,
    .svg-table-row-v119 > *,
    .screen-row > * {
        min-width: 0;
        max-width: 100%;
    }

    .field input,
    .field select,
    .field textarea,
    .screen-filter input,
    .screen-filter select,
    .svg-toolbar-v119 input,
    .svg-toolbar-v119 select,
    .budget-modal input,
    .budget-modal select,
    .budget-modal textarea,
    .login-field input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .customer-row,
    .form-line,
    .budget-filters,
    .budget-modal-grid,
    .product-option-inputs,
    .system-user-permissions-grid,
    .cash-cards,
    .screen-filter,
    .report-filter,
    .centered-action-form-v95,
    .centered-action-form-three-v95,
    .svg-toolbar-v119,
    .reference-actions-v85,
    .svg-actions-v119,
    .mini-actions,
    .actions,
    .budget-actions,
    .budget-products-title,
    .control-panel-actions-v119 {
        min-width: 0 !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    .customer-row,
    .form-line,
    .budget-modal-grid,
    .product-option-inputs,
    .system-user-permissions-grid,
    .cash-cards {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .screen-filter,
    .report-filter,
    .centered-action-form-v95,
    .centered-action-form-three-v95,
    .svg-toolbar-v119 {
        width: 100% !important;
        margin-inline: auto !important;
        justify-content: center !important;
        justify-items: center !important;
        align-items: stretch !important;
        text-align: center !important;
    }

    .screen-filter > *,
    .report-filter > *,
    .centered-action-form-v95 > *,
    .centered-action-form-three-v95 > *,
    .svg-toolbar-v119 > * {
        max-width: 100% !important;
    }

    .actions,
    .reference-actions-v85,
    .svg-actions-v119,
    .mini-actions,
    .budget-actions,
    .product-v2-actions,
    .product-final-actions,
    .order-actions-v79,
    .order-actions-v82,
    .customer-actions,
    .screen-actions {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        justify-content: center !important;
        justify-items: center !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .actions > a,
    .actions > button,
    .actions > form,
    .reference-actions-v85 > *,
    .svg-actions-v119 > *,
    .budget-actions > *,
    .product-v2-actions > *,
    .product-final-actions > *,
    .order-actions-v79 > *,
    .order-actions-v82 > *,
    .customer-actions > *,
    .screen-actions > * {
        max-width: 100% !important;
    }

    table {
        width: 100% !important;
        max-width: 100% !important;
    }

    .table-responsive,
    .table-wrap,
    .table-container,
    .screen-table-card,
    .reference-table-card-v85,
    .budget-table-card,
    .svg-table-v119 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    table:not(.mobile-card-table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .budget-modal,
    .budget-modal-box {
        max-width: 100% !important;
    }

    .budget-modal-box {
        width: calc(100% - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        overflow: auto !important;
        margin: 12px !important;
    }

    .budget-product-head,
    .budget-product-row,
    .budget-product-head-options {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .control-panel-groups-v119 {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .control-panel-group-v119,
    .control-panel-actions-v119,
    .control-panel-logout-form-v119,
    .control-panel-button-v119 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .login-card {
        width: min(100%, 460px) !important;
        max-width: calc(100vw - 24px) !important;
    }

    .login-brands {
        max-width: 100% !important;
    }

    .login-brand {
        max-width: 100% !important;
    }

    .system-user-form,
    .system-user-credentials-v86,
    .system-user-permissions,
    .product-final-form,
    .product-v2-form,
    .order-form-v79,
    .order-form-v82,
    .customer-form,
    .carrier-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .screen-table-head,
    .reference-table-head-v85,
    .svg-table-head-v119 {
        max-width: 100% !important;
    }

    .screen-row,
    .reference-row-v85,
    .svg-table-row-v119,
    .budget-row {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .btn,
    .svg-button-v119,
    .mini-button-v119,
    .mini-btn,
    .pedido-venda-btn,
    .order-btn,
    .control-panel-button-v119,
    button,
    a[role="button"] {
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: center;
    }
}

@media (max-width: 760px) {
    .screen-table-head,
    .reference-table-head-v85,
    .svg-table-head-v119,
    .budget-table-head,
    .budget-product-head {
        overflow-wrap: anywhere;
    }

    .screen-row,
    .reference-row-v85,
    .svg-table-row-v119,
    .budget-row {
        width: 100% !important;
    }

    .screen-row [data-label]::before,
    .svg-table-row-v119 [data-label]::before,
    .reference-row-v85 [data-label]::before {
        overflow-wrap: anywhere;
    }

    .budget-modal-grid,
    .system-user-permissions-grid,
    .cash-cards,
    .control-panel-groups-v119 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .budget-products-title {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .budget-products-title > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    .system-user-permissions-grid label,
    .permission-column-v86 label {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 520px) {
    .container,
    .screen-container,
    .system-user-container,
    .budget-container,
    .svg-page-main-v119,
    .control-panel-content-v119,
    .order-main-v111,
    .product-main-v116 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .btn,
    .svg-button-v119,
    .pedido-venda-btn,
    .order-btn,
    .control-panel-button-v119,
    .login-button {
        min-height: 42px;
    }

    .login-card {
        max-width: calc(100vw - 16px) !important;
    }

    h1 {
        font-size: clamp(1.35rem, 7vw, 2rem) !important;
    }

    h2 {
        overflow-wrap: anywhere;
    }
}