/* Camada responsiva compartilhada do sismaddpm */

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

body {
    min-width: 0;
    overflow-x: hidden;
}

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

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

.table-responsive,
.table-container,
.table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
    .container,
    .main-container,
    .content,
    main {
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .header,
    header {
        gap: 12px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .cards-grid,
    .stats-grid,
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .form-row,
    .form-grid,
    .filter-grid,
    .filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    table {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    .header,
    header.header {
        align-items: stretch !important;
        flex-direction: column;
        padding: 12px !important;
    }

    .header h1,
    header h1 {
        font-size: 1.1rem !important;
        line-height: 1.3;
        overflow-wrap: anywhere;
        width: 100%;
    }

    .user-info,
    .header-actions,
    .header-buttons {
        align-items: stretch !important;
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
        width: 100%;
    }

    .user-info > *,
    .header-actions > *,
    .header-buttons > * {
        flex: 1 1 auto;
        text-align: center;
    }

    .container,
    .main-container,
    .content,
    main {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
    }

    .card,
    .panel,
    .welcome-section,
    .stats-section {
        max-width: 100%;
        padding: 16px !important;
    }

    .cards-grid,
    .stats-grid,
    .dashboard-grid,
    .form-row,
    .form-grid,
    .filter-grid,
    .filters {
        grid-template-columns: 1fr !important;
    }

    form,
    fieldset {
        max-width: 100%;
        min-width: 0;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    button,
    .btn,
    [class*="btn-"] {
        font-size: 16px !important;
        min-height: 44px;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100% !important;
    }

    .actions,
    .buttons,
    .button-group,
    .form-actions,
    .filter-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    table {
        display: block;
        font-size: 12px !important;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    th,
    td {
        padding: 7px 8px !important;
    }

    .modal,
    .modal-content,
    .dialog,
    .popup {
        max-height: 92vh;
        max-width: calc(100vw - 20px) !important;
        overflow: auto;
        width: calc(100vw - 20px) !important;
    }

    pre,
    code {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }
}

@media (max-width: 480px) {
    .card,
    .panel,
    .welcome-section,
    .stats-section {
        border-radius: 8px !important;
        padding: 12px !important;
    }

    .actions > *,
    .buttons > *,
    .button-group > *,
    .form-actions > *,
    .filter-actions > * {
        flex: 1 1 100%;
        width: 100% !important;
    }

    .user-info > a,
    .header-actions > a,
    .header-buttons > a {
        min-height: 44px;
        padding: 11px 10px !important;
    }
}

@media print {
    html,
    body {
        overflow: visible !important;
    }
}