/*
 * flight-card.css
 *
 * Visual for the check_flight_status tool's rendered card (Phase 7 of
 * P2). Status badge color is purely CSS-driven via attribute substring
 * selectors on data-status, so the template doesn't need any class
 * computation. Free-text status strings from the upstream FIDS feed
 * (P1 finding -- "Departed", "Landed", "On Time", "Go To Gate", etc.)
 * all classify correctly via keyword match.
 *
 * Mobile-first sizing -- the chat surface is mobile-primary.
 * Sits inside the existing chat message bubble; no outer wrapper.
 *
 * Rows with empty values (no Gate, no Terminal, etc.) are hidden via
 * the `[data-shown=""]` attribute selector -- the template emits
 * `data-shown="{{value}}"` on optional rows, and empty -> selector
 * matches -> display:none. Saves the template from needing
 * conditional logic primitives.
 */

.flight-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #ffffff;
    padding: 12px 14px;
    margin: 6px 0;
    font-family: inherit;
    color: #222;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    max-width: 100%;
}

.flight-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.flight-card__head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.flight-card__logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex: 0 0 36px;
    border-radius: 6px;
    background: #f5f5f5;
}

.flight-card__title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.flight-card__number {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    color: #111;
}

.flight-card__airline {
    font-size: 0.825rem;
    color: #666;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- status badge --- */
/* Default neutral grey -- shows for any status the keyword matchers
 * below don't catch. Last-rule-wins isn't useful here because the
 * specificity is identical, so the default sits AT THE TOP and the
 * keyword matches override below it. */

.flight-card__status {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eee;
    color: #555;
    white-space: nowrap;
}

/* On time / boarding -- green */
.flight-card__status[data-status*="on time" i],
.flight-card__status[data-status*="boarding" i],
.flight-card__status[data-status*="scheduled" i] {
    background: #e7f5e9;
    color: #1f6b3a;
}

/* Departed / landed / arrived -- neutral-positive */
.flight-card__status[data-status*="departed" i],
.flight-card__status[data-status*="landed" i],
.flight-card__status[data-status*="arrived" i],
.flight-card__status[data-status*="go to gate" i] {
    background: #eef3f8;
    color: #2c5780;
}

/* Delay / late -- amber */
.flight-card__status[data-status*="delay" i],
.flight-card__status[data-status*="late" i] {
    background: #fef3c7;
    color: #92400e;
}

/* Cancelled / diverted -- red */
.flight-card__status[data-status*="cancel" i],
.flight-card__status[data-status*="divert" i] {
    background: #fee2e2;
    color: #991b1b;
}

/* --- route --- */

.flight-card__route {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 6px 0 10px 0;
    font-size: 0.9rem;
}

.flight-card__route-label {
    color: #777;
    font-size: 0.8rem;
}

.flight-card__route-place {
    color: #111;
    font-weight: 600;
}

/* --- grid of fields --- */

.flight-card__grid {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}

.flight-card__row {
    margin: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.flight-card__row dt {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.flight-card__row dd {
    margin: 0;
    font-size: 0.95rem;
    color: #111;
    font-weight: 600;
}

/* Hide optional rows whose value came back empty -- the template
 * emits data-shown="" when the field is null/empty, so we suppress. */
.flight-card__row[data-shown=""] {
    display: none;
}

/* Responsive -- single column on very narrow screens. */
@media (max-width: 360px) {
    .flight-card__grid {
        grid-template-columns: 1fr;
    }
}