/*
    Styling for the shared eBay listings grid.

    Served at _content/PokeChase.Ebay.Components/ebay-listings.css and linked by both hosts. Same
    rule as ebay-policies.css: written entirely against the custom properties the website and the app
    BOTH define (--canvas, --surface, --surface-2, --surface-3, --line, --text, --text-muted,
    --accent, --mono, --radius), so it inherits each host's palette — including the app's light theme
    — instead of hardcoding a second one. Fallbacks match the dark palette in case a host loads this
    before its own variables.

    Nothing here uses Bootstrap's table/alert/form defaults: they are light-themed and render as
    white slabs on the app's near-black canvas, which is what went wrong the first time with the
    policy editor.

    The `pcl-` prefix (PokeChase listings) keeps these off the hosts' own class names.
*/

.ebay-listings {
    color: var(--text, #F3F1FB);
}

/* ── Notices ──────────────────────────────────────────────────────────── */

.pcl-notice {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--line, #2A2741);
    border-radius: var(--radius, 0.85rem);
    background: var(--surface-2, #221E3A);
    font-size: 0.9rem;
}

.pcl-notice--warn {
    border-color: rgba(245, 166, 35, 0.45);
    background: rgba(245, 166, 35, 0.12);
}

.pcl-notice--error {
    border-color: rgba(255, 107, 87, 0.45);
    background: rgba(255, 107, 87, 0.12);
}

.pcl-notice-actions {
    margin-top: 0.6rem;
}

.pcl-muted {
    color: var(--text-muted, #A7A3C0);
    font-size: 0.85rem;
}

/* ── Buttons and inputs ───────────────────────────────────────────────── */

.pcl-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--accent-line, rgba(124, 92, 255, 0.45));
    border-radius: 999px;
    background: transparent;
    color: var(--accent, #7C5CFF);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.pcl-btn:hover:not(:disabled) {
    background: var(--accent-wash, rgba(124, 92, 255, 0.16));
}

.pcl-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.pcl-btn:focus-visible {
    outline: 2px solid var(--accent, #7C5CFF);
    outline-offset: 2px;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */

.pcl-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pcl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pcl-filter {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--line, #2A2741);
    border-radius: 999px;
    background: var(--surface-2, #221E3A);
    color: var(--text-muted, #A7A3C0);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.pcl-filter:hover {
    color: var(--text, #F3F1FB);
    border-color: var(--accent-line, rgba(124, 92, 255, 0.45));
}

.pcl-filter.is-active {
    color: var(--text, #F3F1FB);
    background: var(--accent-wash, rgba(124, 92, 255, 0.16));
    border-color: var(--accent-line, rgba(124, 92, 255, 0.45));
}

.pcl-filter:focus-visible {
    outline: 2px solid var(--accent, #7C5CFF);
    outline-offset: 2px;
}

.pcl-search {
    display: flex;
    gap: 0.4rem;
    flex: 1 1 16rem;
    max-width: 26rem;
}

.pcl-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line, #2A2741);
    border-radius: 0.5rem;
    background: var(--surface-2, #221E3A);
    color: var(--text, #F3F1FB);
    font-size: 0.85rem;
}

.pcl-search input::placeholder {
    color: var(--text-muted, #A7A3C0);
}

.pcl-search input:focus {
    outline: none;
    border-color: var(--accent-line, rgba(124, 92, 255, 0.45));
    box-shadow: 0 0 0 0.2rem var(--accent-wash, rgba(124, 92, 255, 0.16));
}

/* ── Summary ──────────────────────────────────────────────────────────── */

.pcl-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--line, #2A2741);
    font-size: 0.85rem;
    color: var(--text-muted, #A7A3C0);
}

.pcl-summary strong {
    color: var(--text, #F3F1FB);
    font-family: var(--mono, ui-monospace, Consolas, monospace);
}

.pcl-loading {
    color: var(--accent, #7C5CFF);
}

/* ── Table ────────────────────────────────────────────────────────────── */

/* A wide table on a narrow phone scrolls INSIDE here — the page body must never scroll sideways. */
.pcl-scroll {
    overflow-x: auto;
    border: 1px solid var(--line, #2A2741);
    border-radius: var(--radius, 0.85rem);
    background: var(--surface, #181430);
}

.pcl-table {
    width: 100%;
    min-width: 62rem;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.pcl-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.6rem 0.75rem;
    background: var(--surface-2, #221E3A);
    border-bottom: 1px solid var(--line, #2A2741);
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #A7A3C0);
    white-space: nowrap;
}

.pcl-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--line, #2A2741);
    vertical-align: top;
}

.pcl-table tbody tr:last-child td {
    border-bottom: 0;
}

.pcl-table tbody tr:hover {
    background: var(--surface-2, #221E3A);
}

.pcl-num {
    text-align: right;
    font-family: var(--mono, ui-monospace, Consolas, monospace);
    white-space: nowrap;
}

.pcl-table th.pcl-num .pcl-sort {
    width: 100%;
    text-align: right;
}

.pcl-sku {
    font-family: var(--mono, ui-monospace, Consolas, monospace);
    font-size: 0.78rem;
    color: var(--text-muted, #A7A3C0);
    white-space: nowrap;
}

.pcl-sort {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.pcl-sort:hover {
    color: var(--text, #F3F1FB);
}

.pcl-sort.is-active {
    color: var(--accent, #7C5CFF);
}

.pcl-sort:focus-visible {
    outline: 2px solid var(--accent, #7C5CFF);
    outline-offset: 2px;
}

/* ── Item cell ────────────────────────────────────────────────────────── */

.pcl-col-item {
    min-width: 20rem;
}

.pcl-item {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.pcl-item img,
.pcl-item-noimg {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 0.4rem;
    object-fit: cover;
    background: var(--surface-3, #2A2545);
}

.pcl-item-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pcl-item-text > a,
.pcl-item-title {
    color: var(--text, #F3F1FB);
    font-weight: 600;
    text-decoration: none;
}

.pcl-item-text > a:hover {
    color: var(--accent, #7C5CFF);
    text-decoration: underline;
}

.pcl-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted, #A7A3C0);
}

.pcl-item-meta a {
    color: var(--text-muted, #A7A3C0);
    font-family: var(--mono, ui-monospace, Consolas, monospace);
}

/* ── Cell decorations ─────────────────────────────────────────────────── */

.pcl-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--text-muted, #A7A3C0);
}

.pcl-dim {
    color: var(--text-muted, #A7A3C0);
}

.pcl-pill,
.pcl-status {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.pcl-pill--on {
    background: var(--accent-wash, rgba(124, 92, 255, 0.16));
    color: var(--accent, #7C5CFF);
}

.pcl-pill--sale {
    background: rgba(245, 166, 35, 0.16);
    color: var(--amber, #F5A623);
}

.pcl-status {
    background: var(--surface-3, #2A2545);
    color: var(--text-muted, #A7A3C0);
}

.pcl-status--live {
    background: rgba(79, 215, 155, 0.16);
    color: var(--pos, #4FD79B);
}

.pcl-status--failed,
.pcl-status--expired {
    background: rgba(255, 107, 87, 0.16);
    color: var(--neg, #FF6B57);
}

.pcl-status--pending {
    background: rgba(245, 166, 35, 0.16);
    color: var(--amber, #F5A623);
}

/* ── Empty state and pager ────────────────────────────────────────────── */

.pcl-empty {
    padding: 2rem 1rem;
    border: 1px solid var(--line, #2A2741);
    border-radius: var(--radius, 0.85rem);
    background: var(--surface, #181430);
    text-align: center;
}

.pcl-empty h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    color: var(--text, #F3F1FB);
}

.pcl-empty p {
    margin: 0;
    color: var(--text-muted, #A7A3C0);
}

.pcl-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .pcl-search {
        max-width: none;
    }
}

/* ── Selection, bulk bar and the shipping-change confirmation ─────────────
   Every control here moves listed prices, so the confirmation is a full stop:
   it shows each old->new price and the net effect before anything is sent. */

.pcl-col-check {
    width: 2.5rem;
    text-align: center;
}

.pcl-table tbody tr.is-selected {
    background: var(--accent-wash, rgba(124, 92, 255, 0.16));
}

.pcl-check {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.85rem;
}

.pcl-bulkbar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    margin-top: 1rem;
    border: 1px solid var(--accent-line, rgba(124, 92, 255, 0.45));
    border-radius: var(--radius, 0.85rem);
    background: var(--surface-2, #221E3A);
    font-size: 0.85rem;
}

.pcl-btn--primary {
    background: var(--accent, #7C5CFF);
    border-color: var(--accent, #7C5CFF);
    color: #fff;
}

.pcl-btn--primary:hover:not(:disabled) {
    background: var(--accent-press, #5B2EE6);
}

.pcl-confirm {
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--accent-line, rgba(124, 92, 255, 0.45));
    border-radius: var(--radius, 0.85rem);
    background: var(--surface, #181430);
}

.pcl-confirm h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--text, #F3F1FB);
}

.pcl-confirm-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.6rem 0;
    margin: 0.5rem 0;
    border-top: 1px solid var(--line, #2A2741);
    border-bottom: 1px solid var(--line, #2A2741);
    font-size: 0.85rem;
    color: var(--text-muted, #A7A3C0);
}

.pcl-confirm-summary strong {
    color: var(--text, #F3F1FB);
    font-family: var(--mono, ui-monospace, Consolas, monospace);
}

.pcl-up { color: var(--pos, #4FD79B); }
.pcl-down { color: var(--neg, #FF6B57); }

/* Capped so a 50-row batch doesn't push the buttons off-screen. */
.pcl-confirm-scroll {
    max-height: 22rem;
    overflow: auto;
    border: 1px solid var(--line, #2A2741);
    border-radius: 0.5rem;
}

.pcl-confirm-table {
    min-width: 0;
}

.pcl-confirm-manual {
    margin-top: 0.9rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line, #2A2741);
    border-radius: 0.5rem;
    background: var(--surface-2, #221E3A);
}

.pcl-skipped {
    margin-top: 0.9rem;
    font-size: 0.85rem;
    color: var(--text-muted, #A7A3C0);
}

.pcl-skipped summary {
    cursor: pointer;
}

.pcl-skipped ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.pcl-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.pcl-notice--ok {
    border-color: rgba(79, 215, 155, 0.45);
    background: rgba(79, 215, 155, 0.12);
}

/* Free shipping because the postage is inside the item price. Distinct from the promoted/sale
   pills: this one is a statement about money the seller is still collecting, not a status. */
.pcl-pill--free {
    background: rgba(79, 215, 155, 0.16);
    color: var(--pos, #4FD79B);
}

.pcl-bulk-amount {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-left: 0.6rem;
    margin-left: 0.2rem;
    border-left: 1px solid var(--line, #2A2741);
}

.pcl-bulk-amount label {
    color: var(--text-muted, #A7A3C0);
}

.pcl-bulk-amount input {
    width: 5.5rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--line, #2A2741);
    border-radius: 0.5rem;
    background: var(--surface, #181430);
    color: var(--text, #F3F1FB);
    font-family: var(--mono, ui-monospace, Consolas, monospace);
    font-size: 0.85rem;
}

.pcl-bulk-amount input:focus {
    outline: none;
    border-color: var(--accent-line, rgba(124, 92, 255, 0.45));
}

@media (max-width: 720px) {
    .pcl-bulk-amount {
        padding-left: 0;
        margin-left: 0;
        border-left: 0;
        flex-wrap: wrap;
    }
}

/* Scheduled: set up here, not yet on eBay. Deliberately not the "live" green — nothing is on eBay
   yet — and not a warning either, because waiting is the intended state. */
.pcl-status--scheduled {
    background: var(--accent-wash, rgba(124, 92, 255, 0.16));
    color: var(--accent, #7C5CFF);
}