/* Encomendas — 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, e a linguagem visual é a mesma de Compras
   (Finanças): descrição em duas linhas, tags redondas, botões pequenos alinhados à direita.
   Servido como static web asset da RCL em /_content/Cesar.Modules.Shipping.Web/css/shipping.css. */
@layer components {
    /* ---------- texto das células ---------- */
    .shipping-primary {
        display: block;
        font-weight: 600;
        color: var(--ink);
    }

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

    .shipping-code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        letter-spacing: 0.04em;
        font-size: var(--text-sm);
        font-weight: 500;
    }

    .shipping-cell-main {
        min-width: 200px;
    }

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

    .shipping-cell-status {
        min-width: 120px;
    }

    .shipping-cell-event {
        color: var(--ink-muted);
        font-size: var(--text-sm);
        min-width: 160px;
    }

    .shipping-cell-event .shipping-primary {
        font-weight: 500;
        color: var(--ink);
    }

    .shipping-cell-eta {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

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

    /* ---------- selo de etapa ---------- */
    /* Pill com fundo tingido por etapa — mesma forma da .module-tag, cores por estado. */
    .shipping-stage {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px 3px 8px;
        border-radius: 999px;
        font-size: var(--text-2xs);
        font-weight: 600;
        line-height: 1.4;
        background: var(--line);
        color: var(--ink-muted);
    }

    .shipping-stage::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
        flex: none;
        opacity: 0.85;
    }

    .shipping-stage.is-inforeceived,
    .shipping-stage.is-intransit {
        background: var(--green-soft);
        color: var(--accent-ink);
    }

    .shipping-stage.is-outfordelivery,
    .shipping-stage.is-availableforpickup {
        background: #fdf1dc;
        color: #8a5a00;
    }

    .shipping-stage.is-delivered {
        background: var(--green-soft);
        color: var(--accent-ink);
    }

    .shipping-stage.is-delivered::before {
        /* Entregue: check em vez de ponto. */
        width: 6px;
        height: 10px;
        border-radius: 0;
        background: transparent;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-1px) rotate(45deg);
        opacity: 1;
    }

    .shipping-stage.is-deliveryfailure,
    .shipping-stage.is-exception {
        background: var(--danger-bg);
        color: var(--danger);
    }

    .shipping-stage.is-expired,
    .shipping-stage.is-notfound {
        background: var(--line);
        color: var(--ink-muted);
    }

    /* Tema escuro: os âmbar têm de ser lidos sobre fundo escuro. */
    :root[data-theme="dark"] .shipping-stage.is-outfordelivery,
    :root[data-theme="dark"] .shipping-stage.is-availableforpickup {
        background: #3d2e0f;
        color: #f2c56b;
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .shipping-stage.is-outfordelivery,
        :root:not([data-theme="light"]) .shipping-stage.is-availableforpickup {
            background: #3d2e0f;
            color: #f2c56b;
        }
    }

    /* Linhas arquivadas/ignoradas: apagadas, como compras ignoradas. */
    .module-table tr.is-archived .shipping-primary,
    .module-table tr.is-ignored .shipping-primary {
        color: var(--ink-muted);
        font-weight: 500;
    }

    .module-table tr.is-ignored .shipping-cell-main .shipping-primary {
        text-decoration: line-through;
    }

    /* ---------- botões da linha ---------- */
    .shipping-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
    }

    /* Documento e "Atualizar": ícone + rótulo, mesma altura dos outros botões pequenos. */
    .shipping-document,
    .shipping-refresh {
        gap: 6px;
        padding-inline: 12px;
    }

    .shipping-document {
        color: var(--accent-ink);
    }

    .shipping-document svg,
    .shipping-refresh svg {
        flex: none;
    }

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

    .shipping-refresh[disabled] svg {
        animation: shipping-spin 0.9s linear infinite;
    }

    @keyframes shipping-spin {
        to { transform: rotate(360deg); }
    }

    /* Histórico expandido dentro da célula do último evento. */
    .shipping-events {
        margin: 8px 0 0;
        padding: 8px 0 0 12px;
        border-left: 2px solid var(--line);
        list-style: none;
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    .shipping-events li {
        position: relative;
        margin: 0 0 6px;
    }

    .shipping-events li::before {
        content: "";
        position: absolute;
        left: -16px;
        top: 6px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ink-muted);
    }

    .shipping-events li:first-child::before {
        background: var(--accent-ink);
    }

    .shipping-events time {
        display: block;
        font-variant-numeric: tabular-nums;
        color: var(--ink);
    }

    .shipping-events-toggle {
        margin-top: 4px;
        padding-inline: 0;
    }

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

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

    .shipping-timeline-item {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 12px 0;
        border-top: 1px solid var(--line);
    }

    .shipping-timeline-item:first-child {
        border-top: 0;
        padding-top: 4px;
    }

    .shipping-timeline-stage {
        flex: none;
        min-width: 150px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .shipping-timeline-body {
        flex: 1;
        min-width: 0;
    }

    .shipping-timeline-body .shipping-primary {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shipping-timeline-item > .shipping-document {
        flex: none;
        align-self: center;
    }

    .shipping-modal .form-modal-field.is-half {
        grid-column: span 1;
    }

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

        .shipping-timeline-item {
            flex-wrap: wrap;
            gap: 8px;
        }

        .shipping-timeline-stage {
            min-width: 0;
            flex-direction: row;
            align-items: center;
            gap: 10px;
        }

        .shipping-timeline-item > .shipping-document {
            margin-left: auto;
        }
    }

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