/* Global responsive safeguards for app screens */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

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

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

.main-content,
.content-wrapper,
.container,
.container-fluid {
    max-width: 100%;
}

.card,
.modal-content,
.offcanvas,
.dropdown-menu {
    max-width: 100%;
}

/*
 * Camada global de modais/alertas:
 * garante que mensagens e modais fiquem acima de sidebars/headers fixos
 * em páginas legadas e novas.
 *
 * Política de camadas (z-index):
 * - Estrutura (header/sidebar/overlay): 1030-1050
 * - Backdrop de modal: var(--app-z-modal-backdrop)
 * - Modal: var(--app-z-modal)
 * - Alertas/Toasts/Feedback flutuante: var(--app-z-alert)
 *
 * Regra de manutenção:
 * - Evitar valores fixos altos (ex.: 9999/10000)
 * - Preferir sempre as variáveis globais abaixo.
 */
:root {
    --app-z-modal-backdrop: 1990;
    --app-z-modal: 2000;
    --app-z-alert: 2100;
}

.modal-backdrop {
    z-index: var(--app-z-modal-backdrop) !important;
}

.modal {
    z-index: var(--app-z-modal) !important;
}

.swal2-container,
.toast-notification {
    z-index: var(--app-z-alert) !important;
}

.card,
.card-header,
.card-body,
.card-footer,
.list-group-item,
.alert,
.badge {
    overflow-wrap: anywhere;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table-responsive table,
table.table {
    width: 100%;
}

table.table th,
table.table td {
    vertical-align: middle;
}

pre,
code {
    overflow-wrap: anywhere;
}

.row {
    --bs-gutter-x: 1rem;
}

.btn-group,
.btn-toolbar,
.d-flex.gap-2,
.d-flex.gap-3 {
    flex-wrap: wrap;
}

.btn-group > .btn,
.btn-toolbar > .btn,
.btn-toolbar > .btn-group {
    margin-bottom: 0.25rem;
}

.form-control,
.form-select,
.input-group-text {
    min-width: 0;
}

.pagination {
    flex-wrap: wrap;
    gap: 0.25rem;
}

.nav-tabs,
.nav-pills {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

@media (max-width: 992px) {
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Páginas legadas: main-content com col-md-10 fora de row */
    .main-content.col-md-10,
    .main-content.col-lg-10 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .main-content,
    .content-wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .top-header {
        left: 0 !important;
    }

    .top-header .breadcrumb {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .main-content,
    .content-wrapper,
    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .table-responsive {
        overflow-x: auto !important;
    }

    .table-responsive table {
        white-space: nowrap;
    }

    table.table {
        font-size: 0.9rem;
    }

    .table-responsive th,
    .table-responsive td,
    td[style*="min-width"],
    th[style*="min-width"] {
        min-width: auto !important;
    }

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

    .filters-bar,
    .search-bar,
    .search-input-group {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .filters-bar > *,
    .search-bar > *,
    .search-input-group > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .actions-cell {
        min-width: auto !important;
    }

    .actions-cell .btn {
        padding: 0.25rem 0.4rem !important;
    }

    .btn,
    .form-control,
    .form-select {
        min-height: 42px;
    }

    .input-group {
        flex-wrap: nowrap;
    }

    .input-group .form-control {
        width: 1%;
        min-width: 0;
    }

    .card-header,
    .card-body,
    .card-footer {
        padding: 0.85rem;
    }

    .modal-dialog {
        margin: 0.75rem;
    }

    .dropdown-menu-profile {
        min-width: min(92vw, 320px) !important;
    }

    .user-profile {
        max-width: 68vw;
    }

    .user-info {
        min-width: 0;
    }

    .user-info .user-name,
    .user-info .user-role {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .toast-container {
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
    }

    .toast {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .stats-grid,
    .dashboard-grid,
    .cards-grid,
    .garcom-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }

    .dropdown-menu {
        min-width: 0;
    }

    .main-content,
    .content-wrapper,
    .container,
    .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .row {
        --bs-gutter-x: 0.75rem;
    }

    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .modal-content {
        border-radius: 12px;
    }

    /* Botões em coluna só onde faz sentido (evita quebrar tabelas/toolbars) */
    .modal-footer:not(.flex-row):not(.justify-content-between) {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .modal-footer:not(.flex-row):not(.justify-content-between) > .btn {
        width: 100%;
        margin: 0;
    }

    .d-grid > .btn {
        width: 100%;
    }

    .btn-group .btn,
    .action-buttons .btn,
    .actions-cell .btn,
    .btn-toolbar .btn,
    .input-group .btn,
    .pagination .btn,
    .page-link {
        width: auto;
    }

    .top-header .breadcrumb {
        max-width: 100%;
    }
}

/* Force mobile fixes for legacy pages with fixed widths */
@media (max-width: 992px) {
    .table-custom,
    .custom-table,
    .table-list,
    .table-data {
        width: 100% !important;
        min-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .table-responsive .table-custom,
    .table-responsive .custom-table,
    .table-responsive .table-list,
    .table-responsive .table-data {
        min-width: max-content !important;
        width: 100% !important;
    }

    .table-responsive th[style*="width"],
    .table-responsive td[style*="width"] {
        width: auto !important;
    }

    .table-responsive th[style*="min-width"],
    .table-responsive td[style*="min-width"] {
        min-width: auto !important;
    }

    .filter-container,
    .filters-container,
    .search-container,
    .header-actions,
    .page-actions,
    .toolbar,
    .toolbar-actions,
    .filter-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .filter-container > *,
    .filters-container > *,
    .search-container > *,
    .header-actions > *,
    .page-actions > *,
    .toolbar > *,
    .toolbar-actions > *,
    .filter-row > * {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    .modal-content-custom {
        width: calc(100vw - 1rem) !important;
        max-width: 100% !important;
    }
}

/* ─── Layout com barra superior (includes/header.php): um único botão de menu ─── */
@media (max-width: 991.98px) {
    body.app-with-topbar .hamburger-btn {
        display: none !important;
    }
}

/* ─── Cabeçalho fixo: não ultrapassar a largura da viewport ─── */
.top-header {
    min-width: 0;
    max-width: 100vw;
    box-sizing: border-box;
}

.top-header > .d-flex,
.top-header > .d-flex.w-100 {
    min-width: 0;
    max-width: 100%;
}

.top-header nav[aria-label="breadcrumb"] {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .top-header .d-flex.justify-content-between {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .top-header .breadcrumb {
        max-width: 100%;
    }
}

/* ─── DataTables + Bootstrap: linha superior empilha em mobile ─── */
@media (max-width: 767.98px) {
    .dataTables_wrapper .row {
        margin-left: 0;
        margin-right: 0;
    }

    .dataTables_wrapper .row > [class*="col-sm"],
    .dataTables_wrapper .row > [class*="col-md"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0;
        padding-right: 0;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: left !important;
        width: 100%;
        margin-bottom: 0.75rem;
    }

    .dataTables_wrapper .dataTables_filter label {
        display: block;
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-top: 0.35rem;
        box-sizing: border-box;
    }

    .dataTables_wrapper .dataTables_length select {
        max-width: 100%;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        float: none !important;
        width: 100%;
        margin-top: 0.75rem;
    }
}

/* ─── Grades e cards em telas médias ─── */
@media (min-width: 577px) and (max-width: 991.98px) {
    .row-cols-md-auto > * {
        min-width: 0;
    }
}

/* ─── Evita texto em flex que empurra layout (títulos longos) ─── */
.card-header .d-flex,
.list-card-header .d-flex,
.section-header {
    min-width: 0;
}

.card-header .d-flex > *:first-child,
.list-card-header .d-flex > *:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

/* ─── Formulários em linha ─── */
@media (max-width: 767.98px) {
    .row.g-2 > [class*="col"],
    .row.g-3 > [class*="col"] {
        min-width: 0;
    }
}

/* ─── Área segura no conteúdo (evita conteúdo sob home indicator) ─── */
@supports (padding: max(0px)) {
    .main-content,
    .content-wrapper {
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }
}