/**
 * Angebot views — listing, detail, watchlist and status badges.
 * Loaded on demand by Handelsagenten\Core\AccessControl, depends on main.css.
 *
 * Angebot views (archive + single) and member areas, styled to the SEARCH
 * identity via the shared tokens (tokens.css). Loaded on Angebot views.
 */

.ha-container {
    max-width: var(--ha-container-max);
    margin-inline: auto;
    padding-inline: var(--ha-gutter);
}

/* --- Archive: offer list --- */
.ha-archive-title {
    margin-block: 0 var(--ha-space-lg);
    padding-bottom: var(--ha-space-sm);
    border-bottom: var(--ha-divider-strong);
    font-size: 1.6rem;
}

.ha-angebot-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ha-angebot-list-item {
    padding-block: var(--ha-space-lg);
    border-bottom: var(--ha-divider-hair);
}

.ha-angebot-list-title {
    margin: 0 0 var(--ha-space-sm);
    font-family: var(--ha-font-display);
    text-transform: uppercase;
    letter-spacing: var(--ha-display-tracking);
    font-weight: normal;
    font-size: 1.3rem;
    line-height: 1.2;
}

.ha-angebot-list-title a {
    color: var(--ha-text);
    text-decoration: none;
}

/* No bullet before the title: the triangle read as a collapse toggle and
   invited a click that does nothing. A decoration that promises behaviour is
   worse than none. */

.ha-angebot-list-title a:hover {
    text-decoration: underline;
}

.ha-line-details {
    margin: 0;
    display: grid;
    gap: 0.15rem 1.5rem;
}

.ha-line-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ha-line-row dt {
    margin: 0;
    font-weight: bold;
}

.ha-line-row dt::after {
    content: ":";
}

.ha-line-row dd {
    margin: 0;
    font-style: italic;
}

/* --- Single: detail --- */
.ha-angebot-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ha-space-md);
    margin-bottom: var(--ha-space-lg);
    padding-bottom: var(--ha-space-sm);
    border-bottom: var(--ha-divider-strong);
}

.ha-angebot-title {
    margin: 0;
    font-size: 1.6rem;
}

.ha-fields {
    margin: 0 0 var(--ha-space-lg);
}

.ha-field {
    display: grid;
    grid-template-columns: minmax(11rem, 18rem) 1fr;
    gap: 0.25rem 1.5rem;
    padding-block: 0.45rem;
    border-bottom: 1px solid var(--ha-beige-line);
}

.ha-field dt {
    margin: 0;
    font-weight: bold;
    color: var(--ha-text);
}

.ha-field dd {
    margin: 0;
}

.ha-block {
    margin-block: var(--ha-space-xl);
}

.ha-block h2 {
    margin: 0 0 var(--ha-space-md);
    padding-bottom: var(--ha-space-xs);
    border-bottom: var(--ha-divider-strong);
    font-family: var(--ha-font-display);
    text-transform: uppercase;
    letter-spacing: var(--ha-display-tracking);
    font-weight: normal;
    font-size: 1.2rem;
}

/* --- Action controls (SEARCH black button) --- */
.ha-favorite-btn,
.ha-edit-link,
.ha-details-link {
    display: inline-block;
    background: var(--ha-black);
    color: var(--ha-white);
    font-family: var(--ha-font-display);
    text-transform: uppercase;
    letter-spacing: var(--ha-display-tracking);
    font-size: 0.95rem;
    line-height: 1.3;
    padding: 0.5em 1.1em;
    border: 2px solid var(--ha-black);
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
}

.ha-favorite-btn:hover,
.ha-edit-link:hover,
.ha-details-link:hover {
    background: #1a1a1a;
    color: var(--ha-white);
}

/* Bookmarked state: inverted (white with black text/border) */
.ha-favorite-btn[aria-pressed="true"] {
    background: var(--ha-white);
    color: var(--ha-black);
}

.ha-favorite-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

.ha-fav-status {
    margin-inline-start: 0.75rem;
    color: var(--ha-text-muted);
    font-style: italic;
}

/* --- Member lists --- */
.ha-watchlist,
.ha-own-angebote {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ha-watchlist-item,
.ha-own-item {
    padding-block: var(--ha-space-md);
    border-bottom: var(--ha-divider-hair);
}

.ha-note-input {
    width: 100%;
    box-sizing: border-box;
}

/* --- Status badges (AAA-safe text on light fills) --- */
/* ⚠️ font-family is stated rather than inherited: inside a list heading the
   badge otherwise picked up the condensed display face, and "LIVE" in Impact at
   0.8rem is markedly harder to read than the same badge on the detail page.
   Same rule, same look, wherever the badge sits. */
.ha-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-family: var(--ha-font-body);
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ha-white);
    background: var(--ha-text-muted);
}

.ha-status--publish {
    background: var(--ha-success-text);
}

.ha-status--draft {
    background: var(--ha-text-secondary);
}

.ha-status--archiviert {
    background: var(--ha-text-muted);
}

/* Watchlist: saving the note is the primary action, removing the secondary one. */
.ha-favorite-btn[data-mode="remove"] {
    background: var(--ha-white);
    color: var(--ha-text);
    border: 1px solid var(--ha-black);
}

.ha-favorite-btn[data-mode="remove"]:hover {
    background: var(--ha-beige);
}

/* Entry that was just removed from the watchlist — stays in place until the
   next page load so focus and the status message survive. */
.ha-watchlist-item--removed {
    opacity: 0.55;
}

/* --- Listing head: title plus the create call to action --- */
.ha-archive-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ha-space-md);
}

.ha-new-angebot {
    margin: 0;
}

/* --- Per-row actions: bookmark toggle, edit link and lifecycle controls --- */
.ha-angebot-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ha-space-sm);
    margin-block: var(--ha-space-sm) 0;
}

/* Each lifecycle control is its own POST form, so it must not add layout. */
.ha-row-action {
    margin: 0;
    display: inline-flex;
}

.ha-action {
    display: inline-block;
    font-family: var(--ha-font-display);
    text-transform: uppercase;
    letter-spacing: var(--ha-display-tracking);
    font-size: 0.95rem;
    line-height: 1.3;
    padding: 0.5em 1.1em;
    border: 2px solid var(--ha-black);
    border-radius: 0;
    background: var(--ha-white);
    color: var(--ha-text);
    cursor: pointer;
}

.ha-action:hover {
    background: var(--ha-beige);
}

/* The action the current state is asking for: publish, renew, revive. */
.ha-action--primary {
    background: var(--ha-black);
    color: var(--ha-white);
}

.ha-action--primary:hover {
    background: #1a1a1a;
    color: var(--ha-white);
}

.ha-action--danger {
    color: var(--ha-accent-text);
    border-color: var(--ha-accent-text);
}

.ha-action--danger:hover {
    background: var(--ha-accent-text);
    color: var(--ha-white);
}

/* --- Runtime hints --- */
.ha-expiry,
.ha-updated {
    margin-block: var(--ha-space-sm) 0;
    color: var(--ha-text-muted);
    font-size: 0.9rem;
}

/* Final month: the Angebot goes offline unless somebody acts. */
.ha-expiry--due {
    color: var(--ha-accent-text);
    font-weight: bold;
}

.ha-notice {
    margin-block: var(--ha-space-md);
    padding: var(--ha-space-sm) var(--ha-space-md);
    border-left: 4px solid var(--ha-success-text);
    background: var(--ha-beige);
    color: var(--ha-text);
}

/* --- Publish control in the Angebot form --- */
.ha-publish-control {
    margin-block: var(--ha-space-lg);
    padding: var(--ha-space-md);
    border: var(--ha-divider-hair);
    background: var(--ha-surface-alt);
}

.ha-publish-control label {
    font-weight: bold;
}

.ha-publish-hint {
    margin-block: var(--ha-space-xs) 0;
    font-size: 0.9rem;
    color: var(--ha-text-secondary);
}

/* --- Form actions: three ways to save, one way out --- */
.acf-form > .acf-form-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ha-space-sm);
    margin-block: var(--ha-space-lg) 0;
}

/* Slightly tighter than a row action so all four fit one desktop line. */
.acf-form > .acf-form-submit .ha-action {
    font-size: 0.85rem;
    padding-inline: 0.9em;
}

/* Leaving without saving is the exception, so it stands off from the saves. */
.acf-form > .acf-form-submit .ha-action--danger {
    margin-left: var(--ha-space-md);
}

.ha-angebot-list-title .ha-status {
    margin-left: var(--ha-space-sm);
    vertical-align: middle;
}

/* --- Filter bar (agents): country, branch, sorting --- */
.ha-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ha-space-sm);
    margin-block: var(--ha-space-md) var(--ha-space-lg);
    padding-bottom: var(--ha-space-md);
    border-bottom: var(--ha-divider-hair);
}

.ha-filter-field {
    display: flex;
    align-items: center;
    gap: var(--ha-space-xs);
    margin: 0;
}

.ha-filter-label {
    font-size: 0.85rem;
    color: var(--ha-text-secondary);
}

.ha-filters select {
    padding: 0.45em 0.6em;
    border: 1px solid var(--ha-black);
    border-radius: 0;
    background: var(--ha-white);
    color: var(--ha-text);
    font-family: inherit;
    font-size: 0.95rem;
    max-width: 100%;
}

/* An option with no matches stays readable but is not a dead end to click. */
.ha-filters option:disabled {
    color: var(--ha-text-muted);
}

.ha-filter-reset {
    color: var(--ha-accent-text);
    font-size: 0.9rem;
}

/* --- Status tabs (Vertretung): the management view --- */
.ha-tabs {
    margin-block: var(--ha-space-md) var(--ha-space-lg);
    padding-bottom: var(--ha-space-md);
    border-bottom: var(--ha-divider-hair);
}

.ha-tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ha-space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ha-tab a {
    display: inline-block;
    padding: 0.5em 1.1em;
    border: 2px solid var(--ha-black);
    background: var(--ha-white);
    color: var(--ha-text);
    font-family: var(--ha-font-display);
    text-transform: uppercase;
    letter-spacing: var(--ha-display-tracking);
    font-size: 0.95rem;
    line-height: 1.3;
    text-decoration: none;
}

.ha-tab a:hover {
    background: var(--ha-beige);
}

.ha-tab--current a {
    background: var(--ha-black);
    color: var(--ha-white);
}

.ha-tab-count {
    font-family: var(--ha-font-body);
    letter-spacing: normal;
}

/* --- Misc --- */
.ha-empty {
    color: var(--ha-text-muted);
    font-style: italic;
}

.ha-pagination {
    margin-block: var(--ha-space-lg);
}

.ha-pagination .page-numbers {
    display: inline-block;
    padding: 0.3em 0.7em;
    text-decoration: none;
    border: 1px solid var(--ha-black);
}

.ha-pagination .current {
    background: var(--ha-black);
    color: var(--ha-white);
}

@media (max-width: 40rem) {
    .ha-field {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .ha-angebot-header {
        flex-direction: column;
    }

    /* Angebot titles are long and set in a condensed display face; at the
       desktop size they eat three or four lines of a phone screen before any
       content appears. */
    .ha-angebot-list-title {
        font-size: 1.125rem;
    }

    .ha-angebot-title {
        font-size: 1.25rem;
    }

    /* Stacked and full width. Left to their content the three selects end up in
       three different widths, which reads as an accident rather than a set. */
    .ha-filters {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ha-space-sm);
    }

    .ha-filter-field {
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
    }

    .ha-filters select {
        width: 100%;
    }

    .ha-filter-reset {
        align-self: flex-start;
    }
}

/*
 * --- Contact enquiry ---
 *
 * The form is styled as a normal part of the page, because that is what it is
 * without JavaScript. The dialog rules below only apply once the script has
 * moved it there.
 */

.ha-notice--error {
    border-left-color: var(--ha-accent-text);
}

.ha-contact {
    margin-block: var(--ha-space-xl);
}

.ha-contact-blocked {
    margin: 0;
    color: var(--ha-text-muted);
}

.ha-contact-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-block: var(--ha-space-md);
    max-width: 44rem;
}

.ha-contact-field label {
    font-weight: bold;
}

.ha-contact-field input,
.ha-contact-field textarea {
    font: inherit;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--ha-black);
    background: var(--ha-surface);
    color: var(--ha-text);
}

.ha-contact-field textarea {
    resize: vertical;
}

.ha-contact-copy label {
    display: flex;
    align-items: center;
    gap: var(--ha-space-sm);
    font-weight: normal;
}

.ha-contact-consent {
    max-width: 44rem;
    color: var(--ha-text-muted);
    font-size: 0.95rem;
}

.ha-contact-dialog {
    width: min(48rem, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--ha-space-lg);
    border: var(--ha-divider-strong);
    background: var(--ha-surface);
    color: var(--ha-text);
}

.ha-contact-dialog::backdrop {
    background: rgb(0 0 0 / 0.55);
}

.ha-contact-dialog .ha-contact {
    position: relative;
    margin: 0;
}

.ha-contact-dialog h2 {
    padding-inline-end: 7rem;
}

.ha-contact-close {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    font: inherit;
    padding: 0.25em 0.7em;
    border: 1px solid var(--ha-black);
    background: var(--ha-surface);
    color: var(--ha-text);
    cursor: pointer;
}

.ha-contact-close:hover {
    background: var(--ha-beige);
}