/**
 * TMS — Responsividade, densidade visual e padronização global
 * Carregar por ÚLTIMO (após tms-professional, components, system-enhancements).
 * Objetivos: telas de qualquer tamanho, menos elementos visualmente exagerados,
 * tabelas legíveis, modais e formulários contidos no viewport, overflow controlado.
 */

/* ——— Mídia e conteúdo longo ——— */
.tms-main img:not([width]):not([height]),
.tms-content img:not([width]):not([height]),
.tms-card img:not([width]):not([height]) {
    max-width: 100%;
    height: auto;
}

.tms-content,
.tms-card,
.tms-main .container-fluid {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Flex: evita filhos estourando largura */
.tms-main,
.tms-content,
.tms-card .row {
    min-width: 0;
}

/* ——— Títulos de card e cabeçalhos: escala mais contida ——— */
@media (max-width: 1399.98px) {
    .tms-content .tms-card-header .tms-card-title,
    .tms-content .tms-card-header h3.tms-card-title {
        font-size: clamp(0.875rem, 1.15vw, 1.05rem) !important;
        line-height: 1.3 !important;
    }

    .tms-header-enhanced .tms-header-title,
    .tms-header h1,
    .tms-header h2 {
        font-size: clamp(0.95rem, 1.4vw, 1.15rem) !important;
    }

    /* Font Awesome “grandão” no conteúdo */
    .tms-content .fa-2x {
        font-size: 1.35rem !important;
    }
    .tms-content .fa-3x {
        font-size: 1.65rem !important;
    }
    .tms-content .tms-card-body .fa-2x {
        font-size: 1.25rem !important;
    }
}

/* ——— Tablet ——— */
@media (max-width: 991.98px) {
    .tms-card-header,
    .tms-content .card-header {
        padding: 0.55rem 0.75rem !important;
    }
    .tms-card-body,
    .tms-content .card-body {
        padding: 0.75rem !important;
    }
    .tms-content {
        --tms-content-padding-x: clamp(0.9rem, 2.8vw, 1.5rem);
        --tms-content-padding-y: 0.9rem;
    }
}

/* ——— Formulários: altura uniforme, sem “caixas gigantes” ——— */
.tms-content .form-control:not(textarea),
.tms-content .form-select {
    min-height: 2.125rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 0.8125rem;
}

.tms-content textarea.form-control {
    min-height: 4.5rem;
}

/* ——— Modais: limitar à largura útil do viewport ——— */
.modal-dialog.modal-xl {
    max-width: min(1140px, calc(100vw - 1.5rem));
}
.modal-dialog.modal-lg {
    max-width: min(800px, calc(100vw - 1.5rem));
}
.modal-dialog {
    max-width: min(500px, calc(100vw - 1.5rem));
}

/* Rolagem do corpo do modal: definida em tms-professional.css (.modal .modal-body) */

/* ——— Botões em grupo: padrão pode quebrar; em células de tabela mantém linha (rolagem no .table-responsive) ——— */
.tms-content .btn-group,
.tms-content .action-buttons {
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.tms-content .table td .btn-group,
.modal-body .table td .btn-group {
    flex-wrap: nowrap;
    gap: 0;
    align-items: stretch;
}

/* Espaço entre botões na coluna de ações (mais específico que a regra acima) */
.tms-content .table td .tms-grid-actions .btn-group,
.modal-body .table td .tms-grid-actions .btn-group,
.tms-content .table td.tms-grid-actions .btn-group,
.modal-body .table td.tms-grid-actions .btn-group {
    gap: var(--tms-grid-actions-gap, 0.35rem);
}

.tms-content .tms-grid-actions {
    flex-wrap: nowrap;
}

/* ——— Tabelas mobile: legibilidade (corrige th muito pequeno do breakpoint 768px) ——— */
@media (max-width: 768px) {
    table th,
    .table th {
        font-size: 0.6875rem !important;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
    table td,
    .table td {
        font-size: 0.75rem !important;
    }
}

/* ——— Toolbar de registros (grid CRUD): não ultrapassa a linha ——— */
.pagination-control,
.pagination-control-server,
.tms-pagination-toolbar {
    flex-wrap: wrap !important;
    max-width: 100%;
}

/* ——— Badges em grid: tamanho coerente; linha única (detalhes em tms-grids-unified) ——— */
.tms-content .table .badge:not(.tms-badge-wrap):not(.badge-cidade):not(.badge-cidade-inicio):not(.badge-cidade-fim) {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2em 0.45em;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
}

.tms-content .table .badge.badge-cidade,
.tms-content .table .badge.badge-cidade-inicio,
.tms-content .table .badge.badge-cidade-fim,
.tms-content .table .rota-badges .badge.bg-origem,
.tms-content .table .rota-badges .badge.bg-destino {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: center;
}

/* ——— Safe area (notch / iOS) ——— */
@supports (padding: max(0px)) {
    .tms-content {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }
}

/* ——— Impressão: largura útil ——— */
@media print {
    .tms-sidebar,
    .tms-header-enhanced,
    .tms-mobile-menu-toggle,
    .btn,
    .pagination-control,
    .pagination-control-server {
        display: none !important;
    }
    .tms-main {
        width: 100% !important;
        margin: 0 !important;
    }
}