/* =====================================================
   ACCOUNT AREA — Cove v2 skin for the logged-in backend
   (My Account: listings / messages / orders / settings,
   plus the full-width listing edit page).

   CSS-ONLY layer: no markup or behaviour changes. Scoped
   to the HivePress body classes so nothing leaks into the
   public site:
     :is(.hp-template--user-account-page, .woocommerce-account)   sidebar-left pages
     .hp-template--listing-edit-page   full-width edit form
   ===================================================== */

/* ─── Sidebar: card + identity-style nav ─────────────── */

:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar > div,
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar > nav {
    background: var(--dp-surface);
    border: 1px solid var(--dp-line);
    border-radius: var(--dp-radius-card);
    box-shadow: var(--dp-shadow-card);
    padding: 10px;
}

/* "My account" caption above the nav */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account::before {
    content: "My account";
    display: block;
    padding: 10px 14px 8px;
    font-family: var(--dp-font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dp-text-muted);
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account .hp-menu__item {
    margin: 0;
    padding: 0;
    border: none;
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account .hp-menu__item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--dp-radius-chip);
    color: var(--dp-text-nav);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.13s ease, color 0.13s ease;
}

/* Per-item Font Awesome icon (replaces the theme's chevron ::before) */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account .hp-menu__item > a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.85em;
    width: 1.25em;
    text-align: center;
    color: var(--dp-text-muted);
    transition: color 0.13s ease;
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu__item--listings-edit > a::before      { content: "\f0b1"; } /* briefcase */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu__item--bm-messages > a::before        { content: "\f075"; } /* comment */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu__item--orders-view > a::before        { content: "\f543"; } /* receipt */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu__item--user-edit-settings > a::before { content: "\f013"; } /* cog */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu__item--user-logout > a::before        { content: "\f2f5"; } /* sign-out */

:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account .hp-menu__item > a:hover {
    background: var(--dp-tint-warm);
    color: var(--dp-ink);
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account .hp-menu__item > a:hover::before {
    color: var(--dp-ink);
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account .hp-menu__item--current > a {
    background: var(--dp-ink);
    color: #ffffff;
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account .hp-menu__item--current > a::before {
    color: #ffffff;
}

/* Sign out reads as a quiet, separated footer action */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu__item--user-logout {
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--dp-line-row) !important;
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu__item--user-logout > a {
    color: var(--dp-text-muted);
    font-weight: 500;
}

/* ─── Content column: one clean card ─────────────────── */

:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__content {
    background: var(--dp-surface);
    border: 1px solid var(--dp-line);
    border-radius: var(--dp-radius-card);
    box-shadow: var(--dp-shadow-card);
    padding: 30px 34px 34px;
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__title,
.hp-template--listing-edit-page .hp-page__title {
    font-size: 1.7rem;
    margin: 0 0 6px;
    color: var(--dp-ink);
}

/* Breathing room between the title and whatever follows */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__title + * {
    margin-top: 18px;
}

/* ─── Listings table → modern rows ───────────────────── */

:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table {
    width: 100%;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table td,
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table th {
    padding: 18px 12px;
    border: none;
    border-bottom: 1px solid var(--dp-line-row);
    vertical-align: middle;
    background: transparent;
}
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table tr:last-child td {
    border-bottom: none;
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__title a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--dp-ink);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.35;
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__title a:hover { color: var(--dp-primary); }
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__title .hp-icon {
    color: var(--dp-text-muted);
    font-size: 0.85em;
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__categories {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dp-tint-navy-ink); /* solid navy — no greys on meta the user reads */
    white-space: nowrap;
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__date {
    font-size: 0.8rem;
    color: var(--dp-text-muted);
    white-space: nowrap;
}

/* Status cell: surface it as a badge via ::before.
   (Labels are CSS content; English-only, same as the rest of the site.)
   HivePress renders a native <span> for SOME statuses (e.g. pending, gold in
   the parent theme) — hide it so our badge is the only one. */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__status > span {
    display: none;
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__status::before {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--dp-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__status.hp-status--publish::before {
    content: "Published";
    background: var(--dp-ink);
    color: #ffffff;
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__status.hp-status--pending::before {
    content: "Pending";
    background: transparent;
    color: var(--dp-text-sub);
    border: 1px solid var(--dp-line-pill);
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__status.hp-status--draft::before {
    content: "Hidden";
    background: transparent;
    color: var(--dp-text-muted);
    border: 1px solid var(--dp-line-pill);
}

/* ─── Row actions: icons → labelled pill buttons ─────── */

:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__actions {
    text-align: right;
    white-space: nowrap;
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--dp-radius-pill);
    font-size: 0.83rem;
    font-weight: 700;
    text-decoration: none;
    transition: filter 0.13s ease, background 0.13s ease, color 0.13s ease;
    margin-left: 8px;
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action .hp-icon { font-size: 0.9em; }

/* Label the icon-only actions (CSS content, matches action type) */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action--feature::after { content: "Feature"; }
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action--view::after    { content: "View"; }
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action--edit::after    { content: "Edit"; }

/* Feature = THE revenue action. Same size as View (equal pair rule)
   but visually dominant: solid burgundy, elevated, lifts on hover. */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action--feature {
    background: var(--dp-primary);
    color: var(--dp-on-primary);
    border: 1px solid var(--dp-primary);
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(140, 48, 65, 0.35);
    transition: background 0.13s ease, box-shadow 0.13s ease, transform 0.13s ease;
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action--feature:hover {
    background: var(--dp-primary-dark);
    border-color: var(--dp-primary-dark);
    color: var(--dp-on-primary);
    box-shadow: 0 6px 16px rgba(140, 48, 65, 0.45);
    transform: translateY(-1px);
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action--feature .hp-icon {
    color: var(--dp-on-primary);
}

/* View + Edit = ghost buttons: present, but visually silent next to Feature.
   Edit gets a hairline border so it reads as a button at rest (the pencil on
   the row title alone was too easy to miss — feedback 2026-07-15). */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action--view,
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action--edit {
    background: transparent;
    color: var(--dp-text-nav);
    border: 1px solid transparent;
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action--edit {
    border-color: var(--dp-line-pill);
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action--view:hover,
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__action--edit:hover {
    background: var(--dp-tint-warm);
    color: var(--dp-ink);
    border-color: var(--dp-line-pill);
}

/* ─── Forms (settings + listing edit): calm + bounded ── */

:is(.hp-template--user-account-page, .woocommerce-account) .hp-form__field,
.hp-template--listing-edit-page .hp-form__field {
    margin-bottom: 22px;
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-field__label,
.hp-template--listing-edit-page .hp-field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dp-text-sub);
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-field__label small,
.hp-template--listing-edit-page .hp-field__label small {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--dp-text-muted);
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-form input[type="text"],
:is(.hp-template--user-account-page, .woocommerce-account) .hp-form input[type="email"],
:is(.hp-template--user-account-page, .woocommerce-account) .hp-form input[type="password"],
:is(.hp-template--user-account-page, .woocommerce-account) .hp-form input[type="url"],
:is(.hp-template--user-account-page, .woocommerce-account) .hp-form input[type="number"],
:is(.hp-template--user-account-page, .woocommerce-account) .hp-form select,
.hp-template--listing-edit-page .hp-form input[type="text"],
.hp-template--listing-edit-page .hp-form input[type="email"],
.hp-template--listing-edit-page .hp-form input[type="password"],
.hp-template--listing-edit-page .hp-form input[type="url"],
.hp-template--listing-edit-page .hp-form input[type="number"],
.hp-template--listing-edit-page .hp-form select {
    border: 1px solid var(--dp-line-pill);
    border-radius: var(--dp-radius-pill);
    background: var(--dp-surface);
    padding: 11px 18px;
    font-size: 0.95rem;
    color: var(--dp-text);
    transition: border-color 0.13s ease, box-shadow 0.13s ease;
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-form textarea,
.hp-template--listing-edit-page .hp-form textarea {
    border: 1px solid var(--dp-line-pill);
    border-radius: var(--dp-radius-drop);
    background: var(--dp-surface);
    padding: 14px 18px;
    font-size: 0.95rem;
    color: var(--dp-text);
    transition: border-color 0.13s ease, box-shadow 0.13s ease;
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-form input:focus,
:is(.hp-template--user-account-page, .woocommerce-account) .hp-form select:focus,
:is(.hp-template--user-account-page, .woocommerce-account) .hp-form textarea:focus,
.hp-template--listing-edit-page .hp-form input:focus,
.hp-template--listing-edit-page .hp-form select:focus,
.hp-template--listing-edit-page .hp-form textarea:focus {
    border-color: var(--dp-ink);
    box-shadow: 0 0 0 3px rgba(31, 50, 71, 0.08);
    outline: none;
}

/* ─── Listing edit page (full-width template): centre it ── */

.hp-template--listing-edit-page .hp-page__content,
.hp-template--listing-edit-page .hp-page > .hp-row > div {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.hp-template--listing-edit-page .hp-form--listing-update {
    background: var(--dp-surface);
    border: 1px solid var(--dp-line);
    border-radius: var(--dp-radius-card);
    box-shadow: var(--dp-shadow-card);
    padding: 30px 34px 34px;
    margin-top: 18px;
}

/* Image thumbnails inside the upload field pick up the card radius */
.hp-template--listing-edit-page .hp-form--listing-update .hp-field--attachment-upload img {
    border-radius: var(--dp-radius-chip);
}

/* Delete listing: quiet danger link, kept away from Save */
.hp-template--listing-edit-page .hp-form--listing-delete {
    margin-top: 14px;
    text-align: right;
}
.hp-template--listing-edit-page .hp-form--listing-delete .hp-form__button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--dp-text-muted) !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 6px 10px !important;
}
.hp-template--listing-edit-page .hp-form--listing-delete .hp-form__button:hover {
    color: #b3261e !important;
}

/* ─── WooCommerce bits on account pages (orders) ─────── */

:is(.hp-template--user-account-page, .woocommerce-account) .woocommerce-orders-table th {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dp-text-sub);
}

:is(.hp-template--user-account-page, .woocommerce-account) .woocommerce-orders-table .woocommerce-button,
:is(.hp-template--user-account-page, .woocommerce-account) .woocommerce-orders-table .button {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--dp-radius-pill);
    background: var(--dp-surface);
    border: 1px solid var(--dp-line-pill);
    color: var(--dp-text-nav);
    font-size: 0.83rem;
    font-weight: 700;
    transition: background 0.13s ease, color 0.13s ease;
}
:is(.hp-template--user-account-page, .woocommerce-account) .woocommerce-orders-table .woocommerce-button:hover,
:is(.hp-template--user-account-page, .woocommerce-account) .woocommerce-orders-table .button:hover {
    background: var(--dp-tint-warm);
    color: var(--dp-ink);
}

/* ─── Chat page container: match site cards ──────────── */

.bp-messages-wrap.bp-messages-wrap-main {
    border: 1px solid var(--dp-line);
    border-radius: var(--dp-radius-card);
    box-shadow: var(--dp-shadow-card);
    background: var(--dp-surface);
}

/* ─── Mobile ─────────────────────────────────────────── */

@media (max-width: 767px) {
    :is(.hp-template--user-account-page, .woocommerce-account) .hp-page__content {
        padding: 20px 18px 24px;
    }
}

/* ─── Fixes after first visual pass ──────────────────── */

/* Kill the theme's chevron markers on sidebar nav items */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account .hp-menu__item::before,
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account .hp-menu__item::after {
    display: none !important;
    content: none !important;
}

/* The theme spreads item content with space-between — keep icon+label together */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account .hp-menu__item > a {
    justify-content: flex-start !important;
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar .hp-menu--user-account .hp-menu__item > a span {
    flex: none;
}

/* ─── Listings rows as a responsive GRID ─────────────────
   The table markup stays (HivePress renders a <table>), but we
   relayout it with grid so the columns behave at every width and
   the two action buttons sit side by side at EQUAL width. */

:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings,
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings tbody {
    display: block;
    width: 100%;
}

/* Two-line row: [ title …………………… status ]
                 [ category · date … actions ] */
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings tr.hp-listing {
    display: grid;
    /* 320px fits THREE equal-width action pills (Feature/Edit/View) —
       210px fit only two and the third overflowed the row card. */
    grid-template-columns: minmax(0, 1fr) max-content 320px;
    align-items: center;
    gap: 10px 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--dp-line-row);
}
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td.hp-listing__title      { grid-column: 1 / 3; grid-row: 1; }
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td.hp-listing__status     { grid-column: 3; grid-row: 1; justify-self: end; }
/* Categories must CLIP (ellipsis) — the account content column is only
   ~790px wide, and an unclipped category list overflows its grid cell and
   runs under the date + action buttons (bug 2026-07-15). */
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td.hp-listing__categories {
    grid-column: 1;
    grid-row: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td.hp-listing__date       { grid-column: 2; grid-row: 2; justify-self: end; }
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td.hp-listing__actions    { grid-column: 3; grid-row: 2; }
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings tr.hp-listing:last-child {
    border-bottom: none;
}

:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td {
    display: block;
    padding: 0;
    border: none;
    min-width: 0;
}

:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__title a {
    display: flex;
}
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__title a span {
    overflow-wrap: normal;
    word-break: normal;
}

/* Two equal-width buttons, side by side */
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td.hp-listing__actions {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings .hp-listing__action {
    flex: 1 1 0;
    justify-content: center;
    margin: 0;
}

/* Mobile / narrow: three stacked lines —
   title / category·date·status / full-width equal buttons */
@media (max-width: 640px) {
    :is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings tr.hp-listing {
        grid-template-columns: minmax(0, 1fr) minmax(0, max-content) max-content;
        gap: 8px 12px;
        padding: 14px 0;
    }
    :is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td.hp-listing__title      { grid-column: 1 / -1; grid-row: 1; }
    :is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td.hp-listing__categories { grid-column: 1; grid-row: 2; white-space: normal; }
    :is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td.hp-listing__date       { grid-column: 2; grid-row: 2; }
    :is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td.hp-listing__status     { grid-column: 3; grid-row: 2; justify-self: end; }
    :is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td.hp-listing__actions    { grid-column: 1 / -1; grid-row: 3; }
}

/* ─── Round-4 polish (creative pass) ─────────────────── */

/* Rows respond to hover — the whole area feels interactive */
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings tr.hp-listing {
    border-radius: var(--dp-radius-chip);
    transition: background 0.13s ease;
}
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings tr.hp-listing:hover {
    background: var(--dp-bg-page);
}
/* keep the hover tint from touching the card edge awkwardly */
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings tr.hp-listing {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 -10px;
    width: calc(100% + 20px);
}

/* Edit pencil: quiet until the row is hovered */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-listing__title .hp-icon {
    color: var(--dp-line-pill);
    transition: color 0.13s ease;
}
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings tr.hp-listing:hover .hp-listing__title .hp-icon {
    color: var(--dp-primary);
}

/* Sidebar follows on long pages */
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar > div,
:is(.hp-template--user-account-page, .woocommerce-account) .hp-page__sidebar > nav {
    position: sticky;
    top: 24px;
}

/* Guard: listing rows must never force horizontal scroll on narrow screens.
   The date cell truncates before the row can exceed the viewport. */
:is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings {
    max-width: 100%;
}
@media (max-width: 640px) {
    :is(.hp-template--user-account-page, .woocommerce-account) table.hp-table.hp-listings td.hp-listing__date {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}