/* Global responsive layer. Styles only: no markup contracts, no JS behaviour. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

.erp-main,
.erp-content,
.erp-card,
.erp-table-wrap,
.erp-form-grid,
.erp-field,
.erp-grid-2,
.erp-grid-4 {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1200px) {
    .erp-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .erp-page-head,
    .erp-page-header,
    .erp-section-header,
    .erp-card-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .erp-page-head .erp-actions,
    .erp-page-header .erp-actions,
    .erp-section-header .erp-actions,
    .erp-card-header .erp-actions {
        justify-content: flex-start;
        width: 100%;
        margin-top: 12px;
    }
}

@media (max-width: 980px) {
    html,
    body.erp-body,
    body.min-h-screen {
        overflow-x: hidden;
    }

    .erp-content {
        width: 100%;
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }

    .erp-card {
        overflow-x: auto;
    }

    .erp-form-grid {
        grid-template-columns: 1fr !important;
    }

    .erp-form-grid > * {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
        max-width: 100%;
        width: 100%;
    }

    /* Tailwind 12/6/4/3-col grids used as page forms, not the document line editor. */
    .erp-content .grid-cols-12,
    .erp-content .grid-cols-8,
    .erp-content .grid-cols-6,
    .erp-content .grid-cols-4,
    .erp-content .grid-cols-3 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .erp-content .grid-cols-2 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .erp-content [class*="min-w-["] {
        min-width: 0 !important;
    }

    .erp-content input,
    .erp-content select,
    .erp-content textarea,
    .erp-content .erp-input,
    .erp-content .erp-select,
    .erp-content .erp-textarea {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .erp-content table {
        max-width: none;
    }

    .erp-table-wrap,
    .erp-card > .overflow-x-auto,
    .erp-card > .overflow-auto,
    .erp-content .overflow-x-auto,
    .erp-content .overflow-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .erp-page-title,
    .erp-title,
    .erp-doc-number,
    .erp-topbar-title {
        overflow-wrap: anywhere;
    }

    .erp-toolbar {
        display: flex;
        flex-wrap: wrap;
    }

    .erp-search {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .erp-grid-4,
    .erp-grid-2,
    .erp-collection-grid {
        grid-template-columns: 1fr !important;
    }

    .erp-doc-advanced-grid {
        grid-template-columns: 1fr !important;
    }

    .erp-content .flex.justify-between,
    .erp-content .flex.items-center.justify-between {
        flex-wrap: wrap;
        gap: 10px;
    }

    .erp-content .erp-btn {
        white-space: nowrap;
    }

    /* Superadmin: sidebar above content, full width. */
    body:not(.erp-body) > div.flex.min-h-screen {
        flex-direction: column;
    }

    body:not(.erp-body) > div.flex.min-h-screen > aside {
        width: 100% !important;
        max-width: 100%;
        position: relative;
        height: auto;
    }

    body:not(.erp-body) main {
        padding: 16px !important;
    }

    body:not(.erp-body) header .px-8 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Portal cliente: the nav row wraps instead of overflowing. */
    body.bg-slate-950 header .flex,
    body.bg-slate-950 nav .flex {
        flex-wrap: wrap;
        gap: 12px;
    }

    body.bg-slate-950 main {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 640px) {
    .erp-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .erp-page-title {
        font-size: 22px;
    }

    .erp-content .erp-page-header .erp-btn,
    .erp-content .erp-page-head .erp-btn,
    .erp-content .erp-toolbar .erp-btn {
        flex: 1 1 auto;
    }

    /* Keep row actions in tables compact. */
    .erp-table .erp-btn,
    .erp-table .erp-actions .erp-btn {
        flex: 0 1 auto;
        width: auto;
    }
}