/* UI foundation of the rebuild (#289, docs/rebuild/ui-foundation.md): design tokens and opt-in building
   blocks for the dealer-facing pages. Loaded by every layout right after layout.css, so it wins over the
   legacy style.css without !important. Everything except the tokens and the status colours of existing
   status classes is opt-in by a `ui-` class: pages that do not use them keep their look. */

:root {
    /* Brand: primary actions and the active state only, never for plain text or decoration. */
    --ui-brand: #ec0016;
    --ui-brand-strong: #c50014;     /* hover / pressed; 6.2:1 on white */
    --ui-brand-soft: #fdecee;

    /* Neutrals (contrast on white): text 15.8:1, muted 6.7:1, subtle 4.7:1, control border 3.2:1. */
    --ui-text: #1f2328;
    --ui-text-muted: #545d68;
    --ui-text-subtle: #6b7480;
    --ui-border-strong: #87909b;    /* form control borders, checkboxes (3.2:1 >= 3:1, WCAG 1.4.11) */
    --ui-border: #d5d9de;
    --ui-border-soft: #e8eaed;
    --ui-surface: #fff;
    --ui-surface-alt: #f5f6f7;
    --ui-surface-sunken: #eef0f2;
    --ui-focus: #0b5cad;

    /* Status (owner decision 04.11.2026). White text on every solid colour >= 4.5:1. */
    --ui-status-sold: #2e7d4f;          /* Verkauft, Beendet durch Sofortkauf - 5.1:1 */
    --ui-status-sold-soft: #e8f3ec;
    --ui-status-reserved: #b85c00;      /* Im Vorbehalt - 4.6:1 */
    --ui-status-reserved-soft: #fdf1e4;
    --ui-status-notsold: #c62828;       /* Nicht verkauft - 5.6:1 */
    --ui-status-notsold-soft: #fbeaea;
    --ui-status-running: #1d5fa8;       /* In der Auktion / läuft - 6.5:1 */
    --ui-status-running-soft: #e8f0fa;
    --ui-status-neutral: #5f6b76;       /* Angehalten, Ausgelassen, noch nicht gestartet - 5.5:1 */
    --ui-status-neutral-soft: #eef0f2;

    /* Spacing scale (4 px grid) and shapes. */
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 24px;
    --ui-space-6: 32px;
    --ui-card-pad: 20px;
    --ui-radius: 6px;
    --ui-radius-sm: 4px;
    --ui-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 6px rgba(16, 24, 40, .08);

    /* Type scale (Lato from style.css). */
    --ui-fs-xs: 12px;
    --ui-fs-sm: 13px;
    --ui-fs-base: 15px;
    --ui-fs-lg: 18px;
    --ui-fs-xl: 22px;
    --ui-fs-2xl: 28px;
}

@media (max-width: 575.98px) {
    :root { --ui-card-pad: 14px; }
}

/* ---- Cards and sections ------------------------------------------------------------------------- */

.ui-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    padding: var(--ui-card-pad);
    margin-bottom: var(--ui-space-4);
    color: var(--ui-text);
}

/* A fieldset section with the dark header bar (#264): the content gets the card padding, the legend bleeds
   back to the card's edges so the bar still spans it (tests/e2e/flows/13-responsive-layout.spec.ts). */
.content-wrapper fieldset.ui-section {
    padding: 0 var(--ui-card-pad) var(--ui-card-pad);
    margin-bottom: var(--ui-space-4);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow) !important;
    color: var(--ui-text);
    min-width: 0;
}

.content-wrapper fieldset.ui-section > legend {
    width: calc(100% + 2 * var(--ui-card-pad));
    max-width: none;
    margin: 0 calc(-1 * var(--ui-card-pad)) var(--ui-space-4);
    padding: 9px var(--ui-card-pad) !important;
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    line-height: 1.3;
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
}

.ui-subhead {
    margin: var(--ui-space-4) 0 var(--ui-space-2);
    font-size: var(--ui-fs-sm);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

/* ---- Label / value pairs ------------------------------------------------------------------------ */
/* <dl class="ui-dl"><div class="ui-dl__item"><dt>Label</dt><dd>Value</dd></div>…</dl>
   Label above value; the number of columns follows the width of the list itself (container query), so the
   same list has 4 columns in a wide card, 3 or 2 in a narrow one and 1 on a phone. */
.ui-dl {
    container-type: inline-size;
    margin: 0;
}

.ui-dl__grid {
    display: grid;
    grid-template-columns: repeat(var(--ui-dl-cols, 1), minmax(0, 1fr));
    column-gap: var(--ui-space-5);
}

@container (min-width: 400px) { .ui-dl__grid { --ui-dl-cols: 2; } }
@container (min-width: 600px) { .ui-dl__grid { --ui-dl-cols: 3; } }
@container (min-width: 860px) { .ui-dl__grid { --ui-dl-cols: 4; } }

.ui-dl--two .ui-dl__grid { --ui-dl-cols: 1; }
@container (min-width: 300px) { .ui-dl--two .ui-dl__grid { --ui-dl-cols: 2; } }

.ui-dl__item {
    min-width: 0;
    padding: var(--ui-space-2) 0;
    border-bottom: 1px solid var(--ui-border-soft);
}

.ui-dl dt {
    margin: 0 0 2px;
    font-size: var(--ui-fs-sm);
    font-weight: 400;
    line-height: 1.3;
    color: var(--ui-text-muted);
}

.ui-dl dd {
    margin: 0;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ui-text);
    overflow-wrap: anywhere;
}

/* ---- Status pills ------------------------------------------------------------------------------- */
.ui-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--ui-fs-sm);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: #fff;
    background: var(--ui-status-neutral);
}

.ui-pill--sold { background: var(--ui-status-sold); }
.ui-pill--reserved { background: var(--ui-status-reserved); }
.ui-pill--notsold { background: var(--ui-status-notsold); }
.ui-pill--running { background: var(--ui-status-running); }
.ui-pill--neutral { background: var(--ui-status-neutral); }

/* ---- Buttons ------------------------------------------------------------------------------------ */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.ui-btn:hover { text-decoration: none; }
.ui-btn--primary { background: var(--ui-brand); color: #fff; }
.ui-btn--primary:hover { background: var(--ui-brand-strong); color: #fff; }
.ui-btn--secondary { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border-strong); }
.ui-btn--secondary:hover { background: var(--ui-surface-alt); color: var(--ui-text); }
.ui-btn--danger { background: var(--ui-surface); color: var(--ui-status-notsold); border-color: var(--ui-status-notsold); }
.ui-btn--danger:not(:disabled):hover { background: var(--ui-status-notsold); color: #fff; }
.ui-btn:disabled, .ui-btn.disabled {
    background: var(--ui-surface-sunken);
    color: var(--ui-text-subtle);
    border-color: var(--ui-border);
    cursor: not-allowed;
    opacity: 1;
}

/* ---- Form controls ------------------------------------------------------------------------------ */
/* Checkboxes in a .ui-checks scope (and the shared staff bid history, #289): 18 px, a 3.2:1 border, brand
   colour when checked. */
.ui-checks input[type="checkbox"],
.bid-history-full input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: -4px;
    border: 2px solid var(--ui-border-strong);
    border-radius: 3px;
    background: var(--ui-surface) center / 12px 12px no-repeat;
    cursor: pointer;
}

.ui-checks input[type="checkbox"]:checked,
.ui-checks input[type="checkbox"]:indeterminate,
.bid-history-full input[type="checkbox"]:checked,
.bid-history-full input[type="checkbox"]:indeterminate {
    border-color: var(--ui-brand);
    background-color: var(--ui-brand);
}

.ui-checks input[type="checkbox"]:checked,
.bid-history-full input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}

.ui-checks input[type="checkbox"]:disabled,
.bid-history-full input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

.ui-checks input[type="checkbox"]:focus-visible,
.bid-history-full input[type="checkbox"]:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }

.ui-checks label:has(> input[type="checkbox"]),
.bid-history-full .bid-history-toolbar label:has(> input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    font-weight: 600;
    cursor: pointer;
}

/* ---- Tables ------------------------------------------------------------------------------------- */
.ui-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
}

.ui-table th {
    padding: 8px 10px;
    background: var(--ui-surface-alt);
    border-bottom: 1px solid var(--ui-border);
    font-weight: 700;
    color: var(--ui-text-muted);
    text-align: left;
    vertical-align: bottom;
}

.ui-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ui-border-soft);
    vertical-align: middle;
}

/* ---- Status colours of existing status classes (owner decision 04.11.2026) ---------------------- */
/* Current price badge of every bid box (auctions/partials/bid-box, vehicle-bid-box; set live by
   public/js/auction-bid-box.js). Legacy: #4d9b73 / #f01414 / white on #ccc (1.6:1). */
.current_price_main.bg_green { background-color: var(--ui-status-sold); }
.current_price_main.bg_red { background-color: var(--ui-status-notsold); }
.current_price_main.bg_reserved { background-color: var(--ui-status-reserved); }
.current_price_main.bg_running { background-color: var(--ui-status-running); }
.current_price_main.bg_gray { background-color: var(--ui-status-neutral); }
/* "Höchstbietender" / "Überboten" under the price (legacy #4d9b73 with white text, 3.3:1). */
.cls-highest-bidder.bg-site-green { background-color: var(--ui-status-sold) !important; color: #fff; }
.cls-highest-bidder.bg-site-red { background-color: var(--ui-status-notsold); color: #fff; }

/* ---- Focus -------------------------------------------------------------------------------------- */
.ui-scope a:focus-visible,
.ui-scope button:focus-visible,
.ui-scope input:focus-visible,
.ui-scope [tabindex]:focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
}