/* Deal sheet (/deal-sheet/{offerId}) and the My Deals action buttons.
   On screen it sits on the dark portal theme; when printed (see @media print at the bottom) the site header, tab bar and buttons disappear
   and the sheet becomes black on white. */

.deal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.deal-sheet-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.deal-sheet-bar__spacer {
    flex: 1 1 auto;
}

.deal-sheet {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px;
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--m3-shape-lg);
    color: var(--sa-ink);
}

.deal-sheet section {
    margin-top: 22px;
}

.deal-sheet h1 {
    margin: 4px 0 0;
    font-size: 1.9rem;
}

.deal-sheet h2 {
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--sa-line);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sa-ink-2);
}

.deal-sheet__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

.deal-sheet__brand {
    font-weight: 700;
    color: var(--sa-primary);
}

.deal-sheet__ids {
    text-align: right;
    font-size: 0.85rem;
    color: var(--sa-ink-2);
}

.deal-sheet__price {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--sa-line);
    border-radius: var(--m3-shape-md);
}

.deal-sheet__vehicle {
    font-size: 1.3rem;
    font-weight: 600;
}

.deal-sheet__amounts {
    display: flex;
    gap: 24px;
    text-align: right;
}

.deal-sheet__amounts small {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sa-ink-2);
}

.deal-sheet__amounts strong {
    font-size: 1.6rem;
}

.deal-sheet__photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.deal-sheet__photos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

.deal-sheet__specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 20px;
    margin: 0;
}

.deal-sheet__specs--wide {
    grid-template-columns: repeat(2, 1fr);
}

.deal-sheet__specs dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sa-ink-2);
}

.deal-sheet__specs dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.deal-sheet__features {
    columns: 2;
    margin: 0;
    padding-left: 18px;
    font-size: 0.9rem;
}

.deal-sheet__description {
    margin: 0;
    font-size: 0.9rem;
    white-space: pre-line;
}

.deal-sheet__parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.deal-sheet__party {
    font-size: 0.92rem;
    line-height: 1.5;
}

.deal-sheet__history {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.deal-sheet__history th,
.deal-sheet__history td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--sa-line);
    text-align: left;
}

.deal-sheet__footer {
    margin-top: 26px;
    font-size: 0.78rem;
    color: var(--sa-ink-2);
}

@media (max-width: 700px) {
    .deal-sheet {
        padding: 16px;
    }

    .deal-sheet__specs,
    .deal-sheet__photos {
        grid-template-columns: repeat(2, 1fr);
    }

    .deal-sheet__parties,
    .deal-sheet__specs--wide {
        grid-template-columns: 1fr;
    }

    .deal-sheet__features {
        columns: 1;
    }

    .deal-sheet__ids,
    .deal-sheet__amounts {
        text-align: left;
    }
}

@media print {
    .sa-header,
    .sa-tabbar,
    .no-print,
    #blazor-error-ui {
        display: none !important;
    }

    html,
    body,
    .sa-app,
    .sa-main,
    .sa-page,
    .deal-sheet {
        background: #fff !important;
        color: #000 !important;
    }

    .sa-main,
    .sa-page {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .deal-sheet {
        max-width: none;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .deal-sheet h2,
    .deal-sheet__specs dt,
    .deal-sheet__amounts small,
    .deal-sheet__ids,
    .deal-sheet__footer {
        color: #444 !important;
    }

    .deal-sheet__brand {
        color: #000 !important;
    }

    .deal-sheet section,
    .deal-sheet__price {
        break-inside: avoid;
    }

    .deal-sheet__photos img {
        max-height: 150px;
    }
}