/*
 * Offers (offers.js): the market panel's offers, the Make offer dialog's own
 * parts (the rest is trade.css's dialog), the address pages' Offers made /
 * received tabs, and a listing card's best offer. Built on app.css's tokens:
 * light, dark and auto alike; the CSP allows no inline style.
 */

/* ------------------------------------------------------- market panel */

.mpanel-offers {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.mpanel-offers-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.mpanel-offers-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 650;
}

.mpanel-offers-count {
    background: var(--series-1);
    color: #ffffff;
}

.mpanel-best {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    color: var(--ink-2);
    font-size: 13.5px;
}

.mpanel-best-btc {
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
}

.mpanel-offers-head .offer-make {
    margin-left: auto;
}

.mpanel-offers-pending {
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--series-1) 12%, var(--surface));
    font-size: 13px;
}

.mpanel-offers-empty {
    color: var(--ink-2);
    font-size: 13px;
}

.mpanel-offers-more {
    justify-self: start;
}

.offer-table--panel td,
.offer-table--panel th {
    padding-top: 6px;
    padding-bottom: 6px;
}

.offer-table tr.is-mine td {
    background: var(--wash);
}

.offer-you {
    color: var(--ink-2);
    font-size: 12px;
}

/* ------------------------------------------------------- shared cells */

.offer-price {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.offer-table--panel .offer-price {
    align-items: flex-start;
}

.offer-price-btc {
    font-weight: 650;
}

.offer-unit {
    color: var(--ink-2);
    font-size: 12px;
}

.offer-expiry--never {
    color: var(--series-1);
    font-weight: 600;
}

.offer-status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9999px;
    background: var(--chip);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.offer-status--active {
    background: color-mix(in srgb, var(--good) 16%, var(--surface));
    color: color-mix(in srgb, var(--good) 60%, var(--ink));
}

.offer-status--pending,
.offer-status--accepted {
    background: color-mix(in srgb, var(--series-1) 16%, var(--surface));
    color: color-mix(in srgb, var(--series-1) 70%, var(--ink));
}

.offer-status--invalid {
    background: color-mix(in srgb, var(--serious) 18%, var(--surface));
    color: color-mix(in srgb, var(--serious) 55%, var(--ink));
}

.offer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.offer-item-text {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.offer-item-row {
    font-weight: 600;
}

.offer-item-sat {
    color: var(--ink-2);
    font-size: 12px;
    white-space: nowrap;
}

/* ------------------------------------------------------- make offer */

.offer-price-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.offer-price-field {
    display: grid;
    gap: 4px;
}

.offer-expiries {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.offer-expiries legend {
    margin-bottom: 6px;
    font-weight: 600;
}

.offer-expiry-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.offer-expiry-choice[aria-checked="true"] {
    border-color: var(--series-1);
    background: var(--wash);
    font-weight: 600;
}

.offer-listed .btc {
    font-weight: 600;
}

/* ------------------------------------------------------- wallet tabs */

.tab--offers .tab-count {
    margin-left: 2px;
}

.tab-count[hidden] {
    display: none;
}

/* Offers waiting: the count badge in the accent colour, the label as any
   other tab's (bold and the underline are the selected tab's alone). */
.tab--hot .tab-count {
    background: var(--series-1);
    color: #ffffff;
}

.offer-pane {
    display: grid;
    gap: 10px;
    padding: 12px 16px 20px;
}

.offer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.offer-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.offer-lead,
.offer-empty {
    color: var(--ink-2);
    font-size: 13px;
}

.offer-empty {
    padding: 24px 0;
    text-align: center;
}

.offer-empty--error {
    color: var(--critical);
}

.offer-table {
    width: 100%;
}

.offer-actions {
    white-space: nowrap;
}

.offer-row--cancelled td,
.offer-row--expired td,
.offer-row--invalid td {
    color: var(--ink-2);
}

.offer-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* ------------------------------------------------------- listing cards */

.lcard-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    color: var(--ink-2);
    font-size: 12.5px;
}

.lcard-offer-label {
    padding: 0 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--series-1) 14%, var(--surface));
    color: color-mix(in srgb, var(--series-1) 75%, var(--ink));
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lcard-offer-btc {
    color: var(--ink);
    font-weight: 600;
}

/* ------------------------------------------------------- phone */

@media (max-width: 760px) {
    .offer-pane {
        padding: 10px 10px 16px;
    }

    .offer-table thead {
        display: none;
    }

    .offer-table,
    .offer-table tbody {
        display: block;
        width: 100%;
    }

    .offer-scroll,
    .mpanel-offers .table-x {
        border: 0;
        overflow: visible;
    }

    .offer-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
        padding: 10px 0;
        border-bottom: 1px solid var(--grid);
    }

    .offer-table td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
    }

    .offer-table td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        color: var(--muted);
        font-size: 11px;
    }

    .offer-table td[data-label="Rare sats"] {
        grid-column: 1 / -1;
    }

    .offer-table td[data-label="Rare sats"]::before {
        display: none;
    }

    .offer-table .offer-price {
        align-items: flex-start;
    }

    .offer-table .offer-actions,
    .offer-table--panel td[data-label=""] {
        grid-column: 1 / -1;
    }

    .offer-table .offer-actions .btn,
    .offer-table--panel td[data-label=""] .btn {
        width: 100%;
        justify-content: center;
    }

    .mpanel-offers-head .offer-make {
        flex: 1 1 100%;
        margin-left: 0;
        justify-content: center;
    }
}