/* Zamlinx Freight Tracking — project style overrides */

/* D-09: unresolved rows use dark theme default background; orange ⚠ badge is the signal */
tr.needs-review > td {
    /* background removed — badge color alone distinguishes unresolved rows */
}

/* Manifest stats bar: three numbers in a horizontal row */
.manifest-stats {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.manifest-stats > div {
    display: flex;
    flex-direction: column;
}
.stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #6b7280);
}
.stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Compact freight table — fits 11 columns on a 1440px screen */
.freight-table {
    font-size: 0.775rem;
    width: 100%;
    border-collapse: collapse;
}
.freight-table th,
.freight-table td {
    padding: 0.2rem 0.45rem;
    white-space: nowrap;
}
.freight-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* D-01: flash banner auto-dismiss via CSS animation */
@keyframes fadeout {
    0%   { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

[role="alert"] {
    animation: fadeout 5s forwards;
}

/* Fix 2: badge anchors (no href) need explicit pointer cursor */
a.badge {
    cursor: pointer;
}

/* Phase 4: Inline alias resolution form (D-03, D-04) */
.resolve-form {
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
    border-radius: 0.25rem;
    padding: 0.5rem;
    font-size: 0.775rem;
}
.resolve-form label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    padding: 0.25rem 0;
}
.resolve-score {
    font-weight: 600;
    color: var(--bs-secondary-color, #6b7280);
    margin-left: auto;
}
.resolve-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}
.resolve-form button[type="submit"] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}
.resolve-form a.cancel {
    font-size: 0.75rem;
    color: var(--bs-body-color);
}

/* Phase 5: Status Events UI */

/* Phase 5: status event history sub-rows */
.status-event-row > td {
    background-color: color-mix(in srgb, var(--bs-secondary-bg), white 15%);
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #6b7280);
}
.status-event-grid {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr max-content 1fr;
    column-gap: 0.4rem;
    align-items: baseline;
}
.status-event-row .status-event-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color, #6b7280);
    white-space: nowrap;
}
.status-event-row .status-event-value {
    padding-right: 1rem;
}

/* Phase 5: inline status entry form — compact fixed-width vertical stack */
.status-form {
    background: var(--bs-success-bg-subtle);
    border: 1px solid var(--bs-success-border-subtle);
    border-radius: 0.25rem;
    padding: 0.35rem 0.4rem;
    font-size: 0.775rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 200px;
}
.status-form input[type="text"] {
    width: 100%;
    font-size: 0.7rem;
    padding: 0.1rem 0.2rem;
    box-sizing: border-box;
}
.status-form input[type="date"] {
    width: 100%;
    font-size: 0.7rem;
    padding: 0.1rem 0.2rem;
    padding-right: 1.75rem;  /* room for browser calendar icon chrome */
    min-height: 1.6rem;      /* ensures calendar button is fully rendered and hittable */
    box-sizing: border-box;
}
.status-form-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
}
.status-form button[type="submit"] {
    padding: 0.2rem 0.45rem;
    font-size: 0.7rem;
}
.status-form a.cancel {
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #6b7280);
    cursor: pointer;
}

/* Phase 13 (13-08) D-01/D-10/D-16: contact resolver + missing-email prompt.
   New elements only — 8px (0.5rem) padding explicitly, not the legacy
   .status-form padding value (see UI-SPEC Spacing Scale). */
.resolve-form--contact {
    padding: 0.5rem;
}
/* D-16 long-text backstop: the resolver's focal raw-text label (e.g. a full
   Pro Africa offload narrative) wraps normally instead of inheriting any
   nowrap styling, so it never breaks the .resolve-form layout. */
.resolve-form--contact .resolve-form-label {
    white-space: normal;
    word-wrap: break-word;
}

/* Bootstrap container width override — fits 11-column freight table at 1440px */
.container-fluid {
    max-width: min(1600px, 96vw);
    padding-inline: 2%;
}

/* Phase 13 (13-09) D-11: recipient-approval table — freight-table-derived dense
   look, 4px 8px cell padding explicitly (NOT the legacy .freight-table 0.2rem
   0.45rem value — see UI-SPEC Spacing Scale). Cells wrap (no nowrap) so role
   badges and the border-agent Yes/No control never clip at 1440px. */
.freight-table--recipients {
    font-size: 0.775rem;
    width: 100%;
    border-collapse: collapse;
}
.freight-table--recipients th,
.freight-table--recipients td {
    padding: 4px 8px;
    white-space: normal;
}
.freight-table--recipients th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Phase 13 (13-09) D-11: Send All loading backstop — htmx adds "htmx-request"
   to the requesting element for the duration of an in-flight request (no
   hx-indicator override needed since none is declared on the button). Pure
   CSS text swap; hx-disabled-elt handles the actual disable/re-enable. */
.send-all-loading {
    display: none;
}
#send-all-btn.htmx-request .send-all-default {
    display: none;
}
#send-all-btn.htmx-request .send-all-loading {
    display: inline;
}

/* Phase 13 (13-09) D-11: border-agent inline Yes/No confirmation row spacing. */
.border-agent-confirm-label {
    font-size: 0.7rem;
}