/**
 * TMS — Grids / tabelas listagem (global)
 * Carregar após tms-responsive-unified.css.
 * Tags em linha única, coluna de ações compacta, rolagem horizontal responsiva.
 *
 * Largura de colunas: em .tms-datagrid / .tms-data-grid o tema usa table-layout: auto
 * (ver tms-professional.css), ou seja, colunas tendem a acompanhar o conteúdo, salvo
 * .tms-datagrid--fixed-layout ou larguras definidas no HTML/CSS da página.
 */

/* Rolagem horizontal suave em listagens */
.tms-content .table-responsive,
.modal-body .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.tms-content .table-responsive > .table,
.modal-body .table-responsive > .table {
    margin-bottom: 0;
}

/* Badges em células: uma linha (opt-out: .tms-badge-wrap, cidade, rota origem/destino) */
.tms-main .table .badge:not(.tms-badge-wrap):not(.badge-cidade):not(.badge-cidade-inicio):not(.badge-cidade-fim):not(.bg-origem):not(.bg-destino),
.modal .table .badge:not(.tms-badge-wrap):not(.badge-cidade):not(.badge-cidade-inicio):not(.badge-cidade-fim):not(.bg-origem):not(.bg-destino) {
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.25;
    max-width: min(18rem, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
}

a.badge:not(.tms-badge-wrap):not(.badge-cidade):not(.badge-cidade-inicio):not(.badge-cidade-fim):not(.bg-origem):not(.bg-destino) {
    white-space: nowrap;
}

/* Cidade em badge (lista CT-e, detalhes): quebra dentro da tag */
.tms-main .table .badge.badge-cidade,
.modal .table .badge.badge-cidade,
.tms-main .table .badge.badge-cidade-inicio,
.modal .table .badge.badge-cidade-inicio,
.tms-main .table .badge.badge-cidade-fim,
.modal .table .badge.badge-cidade-fim {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.25;
    max-width: min(14rem, 100%);
    overflow: visible;
    text-overflow: unset;
    display: inline-block;
    vertical-align: middle;
}

/*
 * Origem × destino (.rota-badges): sempre uma linha (origem | × | destino);
 * nomes longos quebram só dentro de cada badge; largura reparte-se entre os dois (flex).
 */
.tms-main .table .rota-badges,
.modal .table .rota-badges {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.2rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
}

.tms-main .table .rota-badges .rota-sep,
.modal .table .rota-badges .rota-sep {
    flex-shrink: 0;
    line-height: 1;
}

.tms-main .table .rota-badges .badge.bg-origem,
.tms-main .table .rota-badges .badge.bg-destino,
.modal .table .rota-badges .badge.bg-origem,
.modal .table .rota-badges .badge.bg-destino {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.25;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    overflow: visible;
    text-overflow: unset;
    display: block;
    text-align: center;
    vertical-align: middle;
}

/* Várias tags na mesma célula (ex.: manifestos MDF-e): empilhadas verticalmente */
.tms-grid-tags {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.25rem;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    vertical-align: middle;
}

.tms-grid-tags .badge {
    flex-shrink: 0;
    align-self: flex-start;
    max-width: 100%;
}

/* Coluna de ações: padrão sistema — ícones, sem quebra de grupo */
.tms-grid-actions {
    --tms-grid-actions-gap: 0.35rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--tms-grid-actions-gap);
    justify-content: flex-end;
    /* Nunca encolher abaixo do conteúdo (evita botões cortados por flex/table) */
    min-width: max-content;
    flex-shrink: 0;
}

.tms-grid-actions .btn-group {
    flex-wrap: nowrap;
    gap: var(--tms-grid-actions-gap);
}

/* Botões só ícone em grids (Bootstrap 5; com ou sem .btn-sm no filho — .btn-group-sm basta) */
.tms-grid-actions .btn.tms-grid-icon-btn,
.tms-grid-actions .btn-group-sm > .btn.tms-grid-icon-btn {
    width: 1.85rem;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.tms-grid-actions .btn.tms-grid-icon-btn i,
.tms-grid-actions .btn-group-sm > .btn.tms-grid-icon-btn i {
    font-size: 0.75rem;
}

/* Botões TMS (.tms-btn) só ícone no grid */
.tms-grid-actions .tms-btn.tms-grid-icon-btn,
.tms-grid-actions .btn-group-sm > .tms-btn.tms-grid-icon-btn {
    width: 1.85rem;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.tms-grid-actions .tms-btn.tms-grid-icon-btn i,
.tms-grid-actions .btn-group-sm > .tms-btn.tms-grid-icon-btn i {
    font-size: 0.75rem;
    margin: 0;
}

/* Ícone + texto curto (ex.: “Gerar PDF”) na mesma linha */
.tms-grid-actions .btn.tms-grid-btn-compact,
.tms-grid-actions .btn-group-sm .btn.tms-grid-btn-compact {
    width: auto;
    min-width: 1.75rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.65rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* Contas a pagar e outros: botões .btn-acao em linha */
.tms-grid-actions .btn-acao {
    padding: 0.2rem 0.35rem;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
}

.tms-grid-actions.justify-content-center {
    justify-content: center;
}

/* Status viagem como “pill” compacta alinhada ao grupo */
.tms-grid-actions .tms-grid-status-pill {
    flex-shrink: 0;
    font-size: 0.62rem;
    padding: 0.2em 0.4em;
    white-space: nowrap;
}

/* Célula que deve quebrar texto (ex.: observação): usar classe na <td> */
.tms-table-cell-multiline {
    white-space: normal !important;
    word-break: break-word;
    max-width: 22rem;
}

/* Mesmo comportamento para colunas de nome / razão social em grids */
.tms-table-cell-nome {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
}

.tms-table-cell-nome .badge {
    white-space: normal !important;
    max-width: 100%;
}

.tms-table-cell-multiline .badge {
    white-space: normal !important;
    max-width: 100% !important;
}

/*
 * Zebrado uniforme em todas as colunas (Bootstrap 5 + TMS)
 * table-striped / table-hover aplicam fundo por célula (--bs-table-* + box-shadow inset).
 * td.tms-grid-actions usa display:flex; a última coluna costumava ficar com tom diferente.
 * Células transparentes: o fundo vem só da <tr> (tms-professional.css ou regras de página).
 */
.tms-main .table.table-striped > tbody > tr > th,
.tms-main .table.table-striped > tbody > tr > td,
.modal .table.table-striped > tbody > tr > th,
.modal .table.table-striped > tbody > tr > td {
    background-color: transparent !important;
    box-shadow: none !important;
    --bs-table-bg-type: transparent !important;
    --bs-table-accent-bg: transparent !important;
}

.tms-main .table.table-hover > tbody > tr:hover > th,
.tms-main .table.table-hover > tbody > tr:hover > td,
.modal .table.table-hover > tbody > tr:hover > th,
.modal .table.table-hover > tbody > tr:hover > td {
    box-shadow: none !important;
    --bs-table-accent-bg: transparent !important;
}

/*
 * Coluna de ações fixa ao rolar (opt-out: .tms-datagrid--no-sticky-actions na <table>).
 * Fundo com !important: células zebradas usam fundo transparente em .table-striped (regra acima).
 */
.tms-datagrid-wrap .table.tms-datagrid:not(.tms-datagrid--no-sticky-actions):has(tbody td:last-child .tms-grid-actions) thead th:last-child,
.tms-datagrid-wrap .table.tms-datagrid:not(.tms-datagrid--no-sticky-actions):has(tbody td.tms-grid-actions:last-child) thead th:last-child,
.tms-datagrid-wrap .table.tms-data-grid:not(.tms-datagrid--no-sticky-actions):has(tbody td:last-child .tms-grid-actions) thead th:last-child,
.tms-datagrid-wrap .table.tms-data-grid:not(.tms-datagrid--no-sticky-actions):has(tbody td.tms-grid-actions:last-child) thead th:last-child {
    position: sticky;
    right: 0;
    z-index: 4;
    background: var(--tms-cabecalho-grid-gradient, linear-gradient(135deg, var(--tms-cor-botao, #1e40af) 0%, var(--tms-cor-primaria, #1e3a8a) 100%)) !important;
    box-shadow: -6px 0 10px -4px rgba(15, 23, 42, 0.2);
}

.tms-datagrid-wrap .table.tms-datagrid:not(.tms-datagrid--no-sticky-actions) tbody tr:nth-child(odd) td:last-child:has(.tms-grid-actions),
.tms-datagrid-wrap .table.tms-datagrid:not(.tms-datagrid--no-sticky-actions) tbody tr:nth-child(odd) td.tms-grid-actions:last-child,
.tms-datagrid-wrap .table.tms-data-grid:not(.tms-datagrid--no-sticky-actions) tbody tr:nth-child(odd) td:last-child:has(.tms-grid-actions),
.tms-datagrid-wrap .table.tms-data-grid:not(.tms-datagrid--no-sticky-actions) tbody tr:nth-child(odd) td.tms-grid-actions:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: #e8eaed !important;
    box-shadow: -5px 0 8px -3px rgba(15, 23, 42, 0.12);
}

.tms-datagrid-wrap .table.tms-datagrid:not(.tms-datagrid--no-sticky-actions) tbody tr:nth-child(even) td:last-child:has(.tms-grid-actions),
.tms-datagrid-wrap .table.tms-datagrid:not(.tms-datagrid--no-sticky-actions) tbody tr:nth-child(even) td.tms-grid-actions:last-child,
.tms-datagrid-wrap .table.tms-data-grid:not(.tms-datagrid--no-sticky-actions) tbody tr:nth-child(even) td:last-child:has(.tms-grid-actions),
.tms-datagrid-wrap .table.tms-data-grid:not(.tms-datagrid--no-sticky-actions) tbody tr:nth-child(even) td.tms-grid-actions:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: #ffffff !important;
    box-shadow: -5px 0 8px -3px rgba(15, 23, 42, 0.1);
}

.tms-datagrid-wrap .table.tms-datagrid:not(.tms-datagrid--no-sticky-actions) tbody tr:hover td:last-child:has(.tms-grid-actions),
.tms-datagrid-wrap .table.tms-datagrid:not(.tms-datagrid--no-sticky-actions) tbody tr:hover td.tms-grid-actions:last-child,
.tms-datagrid-wrap .table.tms-data-grid:not(.tms-datagrid--no-sticky-actions) tbody tr:hover td:last-child:has(.tms-grid-actions),
.tms-datagrid-wrap .table.tms-data-grid:not(.tms-datagrid--no-sticky-actions) tbody tr:hover td.tms-grid-actions:last-child {
    background-color: #d1e3f8 !important;
}