/* Viagens — só o que é deste módulo. A base (.module-*: casca, botões, campos, cartões, tabela,
   carregamento, .form-modal-*) vem do app.css do host. Servido como static web asset da RCL em
   /_content/Cesar.Modules.Travel.Web/css/travel.css. */
@layer components {
    /* ---------- texto das células ---------- */
    .travel-primary {
        display: block;
        font-weight: 600;
    }

    .travel-meta {
        display: block;
        color: var(--ink-muted);
        font-size: var(--text-2xs);
    }

    .travel-cell-when {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .travel-cell-main {
        min-width: 160px;
    }

    .travel-cell-main .module-tag {
        display: inline-flex;
        margin-top: 4px;
    }

    /* Situação ao vivo (rotina de acompanhamento): sob a partida; atraso/cancelamento em destaque. */
    .travel-cell-when .travel-live {
        display: inline-flex;
        margin-top: 4px;
    }

    .travel-live.is-delayed,
    .travel-live.is-cancelled,
    .travel-live.is-diverted {
        background: var(--danger-bg);
        border-color: var(--danger-border);
        color: var(--danger);
    }

    .travel-cell-details {
        color: var(--ink-muted);
        font-size: var(--text-sm);
        max-width: 260px;
    }

    .travel-col-amount {
        font-weight: 600;
        white-space: nowrap;
    }

    .travel-col-actions {
        text-align: right;
    }

    /* Trecho: GRU → SDU em caixa alta com espaçamento de sigla, seta discreta. */
    .travel-route {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    .travel-iata {
        letter-spacing: 0.06em;
        font-variant-numeric: tabular-nums;
    }

    .travel-arrow {
        color: var(--ink-muted);
        font-weight: 400;
    }

    /* Situação: cancelado e ignorado ficam apagados; passado só um pouco. */
    .module-table tr.is-cancelled .travel-primary,
    .module-table tr.is-ignored .travel-primary {
        color: var(--ink-muted);
    }

    .module-table tr.is-cancelled .travel-cell-main .travel-primary,
    .module-table tr.is-cancelled .travel-route {
        text-decoration: line-through;
    }

    .module-table tr.is-past .travel-cell-when .travel-primary {
        color: var(--ink-muted);
        font-weight: 500;
    }

    /* Botão do documento (bilhete/voucher): ícone + rótulo, mesmo tamanho dos outros botões da linha. */
    .travel-document {
        gap: 6px;
        padding-inline: 12px;
        color: var(--accent-ink);
    }

    .travel-document svg {
        flex: none;
    }

    .travel-document:hover {
        border-color: var(--accent-ink);
        background: var(--green-soft);
    }

    .travel-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
    }

    /* ---------- painel: linha do tempo ---------- */
    .travel-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }

    .travel-timeline {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .travel-timeline-item {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-top: 1px solid var(--line);
    }

    .travel-timeline-item:first-child {
        border-top: 0;
    }

    .travel-timeline-when {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .travel-timeline-body {
        min-width: 0;
    }

    .travel-timeline-body .travel-meta {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .travel-timeline-title {
        font-weight: 600;
        letter-spacing: 0;
    }

    /* Modal: campos de hora ao lado da data (o rótulo vazio ainda ocupa a linha do rótulo). */
    .travel-modal .form-modal-field.is-half {
        min-width: 0;
    }

    @media (max-width: 760px) {
        .travel-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .travel-timeline-item {
            grid-template-columns: 72px minmax(0, 1fr);
        }

        .travel-timeline-item > .travel-document {
            grid-column: 2;
            justify-self: start;
        }
    }

    @media (max-width: 680px) {
        .travel-col-hide-sm {
            display: none;
        }
    }
}