/* ==============================================================================================
   DELETING A LISTING — the tabs, the destructive controls and the two confirmation modals.

   The visual job here is to make one control on the page feel different from its neighbours
   without making it louder than them. Delete sits in a row with View, Edit, Promote, Boost and
   Archive; it has to read as the dangerous one at a glance, and it must not be the easiest thing
   on the row to hit by accident. So it takes a red outline and keeps exactly the size and padding
   of every other small button — colour carries the warning, not weight.

   The two modals are deliberately unequal. Deleting is reversible for thirty days and gets an
   ordinary confirmation. Permanent removal destroys uploaded media, so it gets a typed word, and
   its button stays disabled until that word is right.
   ============================================================================================== */

/* ---------- Tabs ---------- */

/* .wr-listing-tabs already exists in growth.css as a flex row for the public listing filters.
   Inside the My Listings toolbar it sits beside the Add button, so the inherited bottom margin
   would push it out of alignment with its neighbour. */
.wr-listing-toolbar .wr-listing-tabs { margin-bottom: 0; }

.wr-listing-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--wr3-border-strong, #d3d9e5);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wr3-ink-2, #475569);
    cursor: pointer;
    transition: border-color 130ms ease, background 130ms ease, color 130ms ease;
}

.wr-listing-tabs button:hover:not(.is-active) { border-color: var(--wr3-blue, #1d5ff5); }

.wr-listing-tabs button.is-active {
    background: var(--wr3-blue, #1d5ff5);
    border-color: var(--wr3-blue, #1d5ff5);
    color: #fff;
    font-weight: 700;
}

.wr-listing-tabs button:focus-visible {
    outline: 2px solid var(--wr3-blue, #1d5ff5);
    outline-offset: 2px;
}

.wr-listing-tabcount {
    min-width: 19px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--wr3-surface-2, #eef2f7);
    font-size: 0.7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--wr3-ink-2, #475569);
}

.wr-listing-tabs button.is-active .wr-listing-tabcount {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

/* ---------- The destructive button ----------

   Outlined rather than filled: a solid red button in a row of outlined ones would dominate the
   card and draw the eye to the one action nobody should take casually. */

.wr-btn-danger-outline {
    border-color: rgba(192, 57, 47, 0.45);
    background: #fff;
    color: #c0392f;
}

.wr-btn-danger-outline:hover:not(:disabled) {
    border-color: #c0392f;
    background: rgba(192, 57, 47, 0.06);
}

.wr-btn-danger-outline:focus-visible { outline: 2px solid #c0392f; outline-offset: 2px; }

/* Filled red, used only inside the confirmation modals where it IS the primary action. */
.wr-btn-danger {
    background: #c0392f;
    border-color: #c0392f;
    color: #fff;
}

.wr-btn-danger:hover:not(:disabled) { background: #a5312f; border-color: #a5312f; }
.wr-btn-danger:focus-visible { outline: 2px solid #c0392f; outline-offset: 2px; }
.wr-btn-danger:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- Deleted rows ---------- */

.wr-listing-row.is-deleted { border-left: 3px solid rgba(192, 57, 47, 0.5); }

.wr-status-pill.wr-status-deleted { background: #fee2e2; color: #b3352f; }

.wr-listing-msg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ---------- Modals ---------- */

/* .wr-modal is defined in growth.css at a 960px default, which is far too wide for a two-sentence
   confirmation — a dialog that spans the screen to ask one question reads as an error page. */
.wr-modal--sm {
    width: min(480px, calc(100vw - 32px));
    padding: 24px;
    gap: 0;
}

.wr-modal--sm h2 {
    margin: 0 0 12px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--wr3-ink, #0f172a);
}

.wr-modal--sm p {
    margin: 0 0 11px;
    font-size: 0.89rem;
    line-height: 1.62;
    color: var(--wr3-ink-2, #475569);
}

.wr-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wr3-ink, #0f172a);
}

.wr-modal-field .wr-input,
.wr-modal-field input {
    padding: 10px 12px;
    border: 1px solid var(--wr3-border-strong, #d3d9e5);
    border-radius: 9px;
    font: inherit;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.wr-modal-field input:focus {
    outline: none;
    border-color: #c0392f;
    box-shadow: 0 0 0 3px rgba(192, 57, 47, 0.14);
}

/* Inside the modal, not on the page behind it: the agent has to see why the deletion did not
   happen without losing the dialog they were in. */
.wr-modal-error {
    margin: 12px 0 0 !important;
    padding: 10px 12px;
    border-radius: 9px;
    border-left: 3px solid #c0392f;
    background: rgba(192, 57, 47, 0.06);
    font-size: 0.85rem !important;
    color: #8f2f2d !important;
}

.wr-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
}

.wr-modal-actions .wr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wr-spinner--sm {
    width: 13px;
    height: 13px;
    border-width: 2px;
}

/* ---------- Responsive ----------

   On a narrow screen six buttons wrap into an unreadable block, and Delete can end up directly
   under Edit where a mistimed tap lands on the wrong one. Archive and Delete move to their own
   full-width row, separated from the everyday actions. */

@media (max-width: 720px) {
    .wr-listing-row-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .wr-listing-row-actions .wr-btn {
        width: 100%;
        justify-content: center;
        min-height: 40px;
    }

    .wr-listing-row-actions .wr-btn-danger-outline { grid-column: 1 / -1; }

    .wr-listing-tabs { width: 100%; }
    .wr-listing-tabs button { flex: 1 1 0; justify-content: center; min-height: 40px; }

    .wr-modal-actions { flex-direction: column-reverse; }
    .wr-modal-actions .wr-btn { width: 100%; justify-content: center; min-height: 44px; }

    .wr-listing-msg { flex-direction: column; align-items: stretch; }
}