.order-card {
    border: 1px solid var(--operator-border);
    border-radius: var(--operator-radius);
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    --ground: white;
    background: white;

    &[data-status="pending"] {
        border-color: var(--operator-warning);
        background: var(--operator-warning-bg);
    }

    &[data-status="validated"] {
        border-color: var(--operator-success);
        background: var(--operator-success-bg);
    }

    &[data-status="missing"] {
        border-color: var(--operator-error);
        background: var(--operator-error-bg);
    }

    &[data-status="none"] {
        place-content: center;
        text-align: center;
        color: var(--ink-muted);

        strong { font-size: var(--size-title) }
    }

    p { margin: 0 }
    > p:first-of-type { color: var(--ink-muted) }

    > div:first-of-type {
        border-block-start: 1px solid var(--operator-border);
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding-block-start: 0.5rem;

        small { color: var(--ink-muted) }
    }
}