/* BidHero — app layer on top of the Cloudstaff Design System (/design-system/ui.min.css).
 * Only BidHero-specific composition lives here. Colour, type, spacing, radius and
 * shadow always come from DS tokens, so light/dark mode and rebranding follow the DS.
 * Legacy --cs-* / --bg-* variables are kept as aliases for existing templates. */
@layer reset, foundation, theme, semantic, component-tokens, layout, typography, components, utilities, app;

@layer app {
:root {
  --cs-blue:   var(--color-brand-primary);
  --cs-dark:   var(--color-brand-primary-bold);
  --cs-navy:   var(--color-foreground-primary);
  --cs-light:  var(--color-background-secondary);
  --cs-white:  var(--color-surface-base);
  --cs-border: var(--color-border-subtle);
  --cs-text:   var(--color-foreground-primary);
  --cs-muted:  var(--color-foreground-muted);
  --cs-gold:   var(--color-utility-warning);
  --radius:    var(--radius-2xl);
  --shadow:    var(--shadow-sm);
  --bg-page:   var(--color-background-page);
  --bg-card:   var(--color-surface-base);
  --bg-topbar: var(--color-surface-base);
  --text-main: var(--color-foreground-primary);
  --border:    var(--color-border-subtle);
}

body { background: var(--color-background-page); color: var(--color-foreground-primary); min-height: 100vh; }
img { max-width: 100%; }

/* ---------- Utilities used by templates ---------- */
.text-center { text-align: center; }
.text-muted { color: var(--color-foreground-muted); }
.mt-1{margin-top:var(--space-sm)}.mt-2{margin-top:var(--space-lg)}.mt-3{margin-top:var(--space-xl)}.mt-4{margin-top:var(--space-2xl)}
.mb-1{margin-bottom:var(--space-sm)}.mb-2{margin-bottom:var(--space-lg)}.mb-3{margin-bottom:var(--space-xl)}
.pt-1{padding-top:var(--space-sm)}.pt-2{padding-top:var(--space-lg)}.pt-3{padding-top:var(--space-xl)}
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-1{gap:var(--space-sm)}.gap-2{gap:var(--space-lg)}.items-center{align-items:center}
.hidden{display:none!important}

/* ---------- Brand ---------- */
.bh-brand-img { height: 2rem; width: auto; object-fit: contain; display: block; filter: brightness(0) saturate(100%) invert(30%) sepia(98%) saturate(2800%) hue-rotate(205deg); }
[data-theme="dark"] .bh-brand-img { filter: brightness(0) invert(1); }
.bh-footer-logo { height: 1.75rem; width: auto; display: block; }
[data-theme="dark"] .bh-footer-logo { filter: brightness(0) invert(1); }

/* ---------- Member top bar & footer ---------- */
.bh-topbar { grid-template-columns: auto 1fr; }
.bh-topbar .topbar-nav-wrap { gap: var(--space-sm); }
.bh-topbar .bh-nav-links { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.bh-profile-link { display: inline-flex; align-items: center; gap: var(--space-sm); }
.bh-avatar { object-fit: cover; }
.bh-inline-form { margin: 0; display: inline-flex; }
.bh-main { min-height: 60vh; }
.bh-container { padding-block: var(--space-xl); }
.bh-section { padding: var(--space-xl) 0; }
.bh-footer { margin-top: var(--space-2xl); }
.bh-footer .footer-legal { margin: 0; padding: var(--space-md) var(--space-xl); max-width: none; justify-content: center; }

/* ---------- Hero ---------- */
.bh-hero { background: var(--gradient-brand, var(--color-brand-primary)); color: var(--color-brand-primary-contrast); padding: var(--space-2xl) var(--space-xl); text-align: center; border-radius: var(--radius-2xl); margin-bottom: var(--space-xl); }
.bh-hero h1 { color: inherit; margin: 0 0 var(--space-xs); display: flex; align-items: center; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; }
.bh-hero-logo { height: 2.25rem; object-fit: contain; filter: brightness(0) invert(1); }
.bh-hero p { margin: 0 0 var(--space-md); opacity: .92; }
.bh-hero .button { background: var(--color-surface-base); color: var(--color-brand-primary); }
.bh-points-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(255,255,255,.18); color: inherit; border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-lg); font-weight: var(--font-weight-semibold); }

/* ---------- Auction cards ---------- */
.bh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: var(--space-xl); }
.bh-card { background: var(--color-surface-base); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--duration-normal, .2s), box-shadow var(--duration-normal, .2s), border-color var(--duration-normal, .2s); }
.bh-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-brand-primary); }
.bh-card-img { width: 100%; height: 12.5rem; object-fit: cover; background: var(--color-background-secondary); display: block; }
.bh-card-img-placeholder { width: 100%; height: 12.5rem; background: var(--color-background-secondary); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.bh-card-body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; gap: var(--space-2xs); }
.bh-card-title { font-size: var(--font-size-md); margin: 0; }
.bh-card-title a { color: var(--color-foreground-primary); }
.bh-card-meta { font-size: var(--font-size-sm); color: var(--color-foreground-muted); }
.bh-card-price { font-family: var(--font-family-heading); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-brand-primary); margin-top: auto; padding-top: var(--space-sm); }
.bh-card-countdown { font-size: var(--font-size-xs); color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }

/* ---------- Item detail / bidding ---------- */
.bh-detail-img { width: 100%; max-height: 26rem; object-fit: contain; background: var(--color-background-secondary); border-radius: var(--radius-2xl); border: 1px solid var(--color-border-subtle); }
.bh-detail-thumbs { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); flex-wrap: wrap; }
.bh-detail-thumb { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; }
.bh-detail-thumb:hover, .bh-detail-thumb.active { border-color: var(--color-brand-primary); }
.bh-bid-box { background: var(--color-surface-base); border: 1px solid var(--color-border-subtle); border-top: 4px solid var(--color-brand-primary); border-radius: var(--radius-2xl); padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.bh-bid-box h3 { margin: 0 0 var(--space-2xs); font-size: var(--font-size-md); color: var(--color-foreground-muted); font-weight: var(--font-weight-medium); }
.bh-bid-current { font-family: var(--font-family-heading); font-size: var(--font-size-3xl, 2.2rem); font-weight: var(--font-weight-bold); color: var(--color-brand-primary); margin-bottom: var(--space-lg); }
.bh-bid-input { display: flex; gap: var(--space-sm); }
.bh-bid-input input { flex: 1; }
.bh-bid-history { margin-top: var(--space-xl); }
.bh-bid-row { display: flex; justify-content: space-between; padding: var(--space-sm) var(--space-md); background: var(--color-background-secondary); border-radius: var(--radius-md); margin-bottom: var(--space-xs); font-size: var(--font-size-sm); }
.bh-countdown { display: flex; gap: var(--space-md); justify-content: center; margin: var(--space-lg) 0; }
.bh-countdown-unit { text-align: center; }
.bh-countdown-num { font-family: var(--font-family-heading); font-size: var(--font-size-2xl, 2rem); font-weight: var(--font-weight-bold); color: var(--color-brand-primary); display: block; line-height: 1; font-variant-numeric: tabular-nums; }
.bh-countdown-label { font-size: var(--font-size-xs); color: var(--color-foreground-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Forms / alerts / tables (thin extras over DS) ---------- */
.field { margin-bottom: var(--space-lg); }
.field > label:not([class]) , .field > .field-label { font-weight: var(--font-weight-semibold); }
.alert { margin-bottom: var(--space-lg); }
.table-wrap { margin-bottom: var(--space-lg); }
.table { min-width: 0; }
.table td, .table th { vertical-align: middle; }
.bh-searchbar { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.bh-searchbar input { flex: 1; min-width: 12rem; }
.bh-searchbar select { width: 10rem; }
.bh-pagination { display: flex; gap: var(--space-xs); justify-content: center; padding: var(--space-lg) 0; list-style: none; margin: 0; flex-wrap: wrap; }
.bh-pagination > * { list-style: none; }
.bh-pagination a, .bh-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; padding: 0 var(--space-md); border-radius: var(--radius-md); background: var(--color-surface-base); border: 1px solid var(--color-border-subtle); color: var(--color-brand-primary); font-size: var(--font-size-sm); }
.bh-pagination .current, .bh-pagination .active a, .bh-pagination a:hover { background: var(--color-brand-primary); color: var(--color-brand-primary-contrast); border-color: var(--color-brand-primary); }
.bh-filter { background: var(--color-surface-base); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-2xl); padding: var(--space-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--space-lg); }
.bh-filter-item { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); color: var(--color-foreground-primary); }
.bh-filter-item:hover, .bh-filter-item.active { background: var(--color-background-secondary); color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); }
.bh-error { padding-block: var(--space-2xl); }

/* ---------- Auth pages ---------- */
.bh-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-background-page); padding: var(--space-xl); }
.bh-auth-card { background: var(--color-surface-base); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-2xl); padding: var(--space-2xl); width: 100%; max-width: 26rem; box-shadow: var(--shadow-lg, var(--shadow-md)); color: var(--color-foreground-primary); }
.bh-auth-logo { text-align: center; margin-bottom: var(--space-xl); }
.bh-auth-logo img { height: 3rem; width: auto; margin-inline: auto; filter: brightness(0) saturate(100%) invert(30%) sepia(98%) saturate(2800%) hue-rotate(205deg); }
[data-theme="dark"] .bh-auth-logo img { filter: brightness(0) invert(1); }
.bh-auth-logo p { margin: var(--space-xs) 0 0; color: var(--color-foreground-muted); font-size: var(--font-size-xs); letter-spacing: .06em; text-transform: uppercase; }
.bh-divider { display: flex; align-items: center; gap: var(--space-md); margin: var(--space-lg) 0; color: var(--color-foreground-muted); font-size: var(--font-size-sm); }
.bh-divider::before, .bh-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-divider); }
.bh-ms-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; min-height: 2.75rem; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-base); color: var(--color-foreground-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.bh-ms-btn:hover { background: var(--color-background-secondary); }

/* ---------- Admin shell ---------- */
.bh-admin-wrap { background: var(--color-background-page); }
.bh-admin-sidebar { position: sticky; top: 0; height: 100vh; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.bh-admin-sidebar .app-sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.bh-admin-sidebar .bh-brand-link { flex-direction: row; align-items: center; gap: var(--space-sm); }
.bh-admin-sidebar .bh-brand-img { height: 1.75rem; filter: none; }
[data-theme="dark"] .bh-admin-sidebar .bh-brand-img { filter: brightness(0) invert(1); }
.bh-brand-sub { color: var(--color-foreground-muted); font-size: var(--font-size-xs); padding-left: var(--space-sm); border-left: 1px solid var(--color-border-subtle); }
.bh-admin-menu { padding: var(--space-xs) var(--space-sm); flex: 1; }
.bh-admin-menu a.sidebar-link, .bh-sidebar-footer a.sidebar-link { display: flex; align-items: center; gap: var(--space-md); width: 100%; min-height: 2.25rem; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md); color: var(--color-foreground-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.bh-admin-menu a.sidebar-link i { color: var(--color-foreground-muted); font-size: .9rem; }
.bh-admin-menu a.sidebar-link:hover, .bh-sidebar-footer a.sidebar-link:hover { background: var(--color-background-secondary); color: var(--color-foreground-primary); }
.bh-admin-menu a.sidebar-link.is-active { background: var(--color-brand-primary-soft, var(--color-utility-info-soft)); color: var(--color-brand-primary); }
.bh-admin-menu a.sidebar-link.is-active i { color: var(--color-brand-primary); }
.bh-menu-section { margin: var(--space-md) 0 var(--space-2xs); padding: 0 var(--space-md); font-size: .6875rem; font-weight: var(--font-weight-semibold); color: var(--color-foreground-muted); letter-spacing: .08em; text-transform: uppercase; }
.bh-menu-section:first-child { margin-top: var(--space-xs); }
.bh-sidebar-footer { border-top: 1px solid var(--color-divider); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-2xs); }
.bh-sidebar-user { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); font-size: var(--font-size-sm); }
.bh-sidebar-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar.is-collapsed .logo-lockup-text, .app-sidebar.is-collapsed .bh-brand-sub, .app-sidebar.is-collapsed .bh-menu-section, .app-sidebar.is-collapsed .bh-sidebar-user-name, .app-sidebar.is-collapsed .bh-brand-img { display: none; }
.bh-admin-main { padding: 0; min-width: 0; background: var(--color-background-page); color: var(--color-foreground-primary); display: flex; flex-direction: column; }
.bh-admin-topbar { background: var(--color-surface-base); padding: 0 var(--space-xl); min-height: 3.5rem; display: flex; align-items: center; border-bottom: 1px solid var(--color-border-subtle); gap: var(--space-md); position: sticky; top: 0; z-index: var(--z-index-topbar, 200); }
.bh-admin-topbar .breadcrumbs { flex: 1; font-size: var(--font-size-sm); }
.bh-admin-content { padding: var(--space-xl); max-width: none; flex: 1; width: 100%; }
.bh-page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.bh-page-title { margin: 0; font-size: var(--font-size-2xl, 1.75rem); }
.bh-page-sub { margin: var(--space-2xs) 0 0; color: var(--color-foreground-muted); font-size: var(--font-size-sm); }
.bh-page-actions { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.bh-admin-footer { display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-lg) var(--space-xl); border-top: 1px solid var(--color-border-subtle); color: var(--color-foreground-muted); font-size: var(--font-size-sm); }
.bh-menu-toggle { display: none; }
.bh-admin-main .table-wrap { background: var(--color-surface-base); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); overflow: auto; }
.bh-admin-main .table thead th { color: var(--color-brand-primary); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .04em; }
.bh-admin-main .bh-pagination { justify-content: flex-end; }
.bh-chart-card { background: var(--color-surface-base); border-radius: var(--radius-2xl); padding: var(--space-xl); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-subtle); }
.bh-chart-card h2 { margin: 0; font-size: var(--font-size-lg); }
.bh-chart-card p { margin: 0 0 var(--space-md); color: var(--color-foreground-muted); font-size: var(--font-size-sm); }
.bh-chart-box { position: relative; height: 18rem; }
.bh-chart-box.is-tall { height: 20rem; }
.bh-kpi-link { margin-top: var(--space-xs); font-size: var(--font-size-sm); }
.bh-dash-grid { display: grid; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.bh-dash-grid.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .bh-dash-grid.cols-2 { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .bh-menu-toggle { display: inline-flex; } .bh-admin-sidebar { position: fixed; } .bh-admin-content { padding: var(--space-lg); } .bh-admin-footer { padding: var(--space-md); } }

/* ---------- Stat cards ---------- */
.bh-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-xl); }
.bh-stat { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-lg); background: var(--color-surface-base); border: 1px solid var(--color-border-subtle); border-top: 3px solid var(--color-brand-primary); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); color: var(--color-foreground-primary); }
a.bh-stat:hover { box-shadow: var(--shadow-md); }
.bh-stat-val { font-family: var(--font-family-heading); font-size: var(--font-size-2xl, 2rem); font-weight: var(--font-weight-bold); color: var(--color-brand-primary); }
.bh-stat-label { font-size: var(--font-size-sm); color: var(--color-foreground-muted); }

/* Legacy inline card shells (style="background:var(--color-surface-base)") get a DS border in both modes */
[style*="background:var(--color-surface-base)"] { border: 1px solid var(--color-border-subtle); color: var(--color-foreground-primary); }
canvas { max-width: 100%; }
[data-theme="dark"] canvas { filter: brightness(.92); }

@media (max-width: 768px) { .bh-bid-input { flex-direction: column; } .bh-topbar .bh-nav-links { margin-left: 0; } }
@media (max-width: 540px) { .bh-grid { grid-template-columns: 1fr; } }
}

/* ---------- Admin list/table refinements (additive) ---------- */
.bh-admin-main .bh-searchbar { align-items: center; }
.bh-admin-main .bh-searchbar form { display: flex; gap: var(--space-sm); flex: 1; flex-wrap: wrap; align-items: center; }
.bh-search-field { position: relative; flex: 1; min-width: 12rem; display: block; }
.bh-search-field > i { position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--color-foreground-muted); pointer-events: none; }
.bh-search-field > .input { padding-left: 2.5rem; width: 100%; }
.bh-admin-main td .button-sm.button-secondary, .bh-admin-main td .button-sm.button-tertiary { background: none; border-color: transparent; box-shadow: none; color: var(--color-foreground-primary); }
.bh-admin-main td .button-sm.button-secondary:hover { background: var(--color-background-secondary); }
.bh-admin-main td .button-sm.button-danger { background: none; border-color: transparent; box-shadow: none; color: var(--color-feedback-danger); }
.bh-admin-main td .button-sm.button-success { background: none; border-color: transparent; box-shadow: none; color: var(--color-feedback-success); }
.bh-pager-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-md); font-size: var(--font-size-sm); }
.bh-pager-row .bh-pagination { padding: 0; }
.bh-pager-row .bh-pagination a, .bh-pager-row .bh-pagination span { background: none; border-color: transparent; border-radius: var(--radius-pill); }
.bh-pager-row .bh-pagination .active a, .bh-pager-row .bh-pagination .current, .bh-pager-row .bh-pagination .active { background: var(--color-brand-primary); color: var(--color-brand-primary-contrast); }

/* ---------- Admin forms, detail lists, empty states (additive) ---------- */
.bh-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-lg); align-items: start; }
.bh-two-col.bh-two-col-wide { grid-template-columns: minmax(0, 1fr) 28rem; }
@media (max-width: 1000px) { .bh-two-col, .bh-two-col.bh-two-col-wide { grid-template-columns: 1fr; } }
.bh-image-slot .bh-image-current { display: block; max-width: 100%; max-height: 7.5rem; object-fit: contain; border-radius: var(--radius-lg); border: 1px solid var(--color-border-subtle); margin-bottom: var(--space-xs); }
.bh-form-card { padding: var(--space-xl); }
.bh-form-section { padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--color-divider); }
.bh-form-section:last-of-type { border-bottom: 0; margin-bottom: 0; }
.bh-form-card h2, .bh-form-section h2 { margin: 0 0 var(--space-md); font-size: var(--font-size-lg); }
.bh-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.bh-form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .bh-form-grid, .bh-form-grid.cols-3 { grid-template-columns: 1fr; } }
.bh-form-hint { color: var(--color-foreground-muted); margin: 0 0 var(--space-md); }
.bh-req { color: var(--color-feedback-danger); }
.bh-form-actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding-top: var(--space-lg); margin-top: var(--space-md); border-top: 1px solid var(--color-divider); }
.bh-dl { display: grid; grid-template-columns: 14rem 1fr; gap: var(--space-xs) var(--space-md); margin: 0; }
.bh-dl dt { color: var(--color-foreground-secondary); }
.bh-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .bh-dl { grid-template-columns: 1fr; } }
.bh-pill { display: inline-block; padding: 2px var(--space-md); border-radius: var(--radius-pill); background: var(--color-utility-info-soft); color: var(--color-utility-info-bold, var(--color-brand-primary)); border: 1px solid var(--color-brand-primary-soft, transparent); font-size: var(--font-size-xs); }
.bh-empty { text-align: center; padding: var(--space-xl); border: 1px dashed var(--color-border-subtle); border-radius: var(--radius-2xl); display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.bh-empty h2 { margin: 0; }
.bh-empty-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-background-secondary); display: grid; place-items: center; color: var(--color-foreground-muted); font-size: 1.25rem; }
.bh-tab-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.bh-tab { padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-pill); color: var(--color-foreground-secondary); font-weight: var(--font-weight-medium); }
.bh-tab.is-active { background: var(--color-brand-primary); color: var(--color-brand-primary-contrast); }
.bh-mono { font-family: var(--font-family-mono, monospace); }
.bh-tag-table { box-shadow: none; border: 1px solid var(--color-border-subtle); }
.bh-admin-main td .button-sm.bh-btn-outline { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-pill); }
.bh-admin-main .table td form { margin: 0; display: inline; }
.bh-chart-card .field { margin-bottom: var(--space-md); }

/* Winners — period & winner cells */
@layer app {
  .bh-period { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); white-space: nowrap; }
  .bh-period-range { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
  .bh-period-range i { color: var(--color-foreground-muted); font-size: .7rem; }
  .bh-winner { display: inline-block; margin-right: var(--space-xs); font-size: var(--font-size-sm); }
}

/* Honour the hidden attribute on design-system components that set their own display */
@layer app {
  .alert[hidden], .modal [hidden] { display: none !important; }
}

/* Password field with show/hide eye */
@layer app {
  .bh-pw-wrap { position: relative; }
  .bh-pw-wrap .input { padding-right: 2.75rem; width: 100%; }
  .bh-pw-toggle { position: absolute; top: 50%; right: var(--space-sm); transform: translateY(-50%); border: 0; background: transparent; color: var(--color-foreground-muted); cursor: pointer; padding: var(--space-xs); line-height: 1; border-radius: var(--radius-md); }
  .bh-pw-toggle:hover, .bh-pw-toggle:focus-visible { color: var(--color-foreground-primary); background: var(--color-background-secondary); }
}

/* Masked secret with copy button */
@layer app {
  .bh-secret { display: inline-flex; align-items: center; gap: var(--space-xs); }
  .bh-copy-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-subtle); background: var(--color-surface-base); color: var(--color-brand-primary); border-radius: var(--radius-md); padding: var(--space-2xs) var(--space-xs); cursor: pointer; line-height: 1; }
  .bh-copy-btn:hover, .bh-copy-btn:focus-visible { background: var(--color-background-secondary); }
  .bh-copy-btn[hidden] { display: none; }
}

/* Confirm-password modal layout */
@layer app {
  #envReveal { padding: 0; }
  #envReveal .bh-modal-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) var(--space-md); border-bottom: 1px solid var(--color-border-subtle); }
  #envReveal .bh-modal-head-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-utility-warning-soft, #fff4d6); color: var(--color-utility-warning-bold, #b7791f); font-size: .9rem; }
  #envReveal .bh-modal-head-title { flex: 1; margin: 0; font-size: var(--font-size-lg); }
  #envReveal .bh-modal-x { flex: none; border: 0; background: transparent; color: var(--color-foreground-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-md); }
  #envReveal .bh-modal-x:hover, #envReveal .bh-modal-x:focus-visible { background: var(--color-background-secondary); color: var(--color-foreground-primary); }
  #envReveal .bh-modal-form { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
  #envReveal .bh-modal-form p { margin: 0; line-height: 1.5; }
  #envReveal .bh-modal-note { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-background-secondary); font-size: var(--font-size-sm); color: var(--color-foreground-secondary); }
  #envReveal .bh-modal-note i { flex: none; margin-top: .2em; color: var(--color-brand-primary); }
  #envReveal .bh-modal-form .field { margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
  #envReveal .bh-modal-form .modal-footer { margin: 0; padding: var(--space-md) 0 0; border-top: 1px solid var(--color-border-subtle); display: flex; justify-content: flex-end; gap: var(--space-sm); }
}

/* Shared modal header/body (confirm dialogs) */
@layer app {
  #confirmModal { padding: 0; }
  #confirmModal .bh-modal-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) var(--space-md); border-bottom: 1px solid var(--color-border-subtle); }
  #confirmModal .bh-modal-head-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-utility-warning-soft, #fff4d6); color: var(--color-utility-warning-bold, #b7791f); font-size: .9rem; }
  #confirmModal .bh-modal-head-icon.is-danger { background: var(--color-utility-danger-soft, #fde2e4); color: var(--color-utility-danger, #d62839); }
  #confirmModal .bh-modal-head-title { flex: 1; margin: 0; font-size: var(--font-size-lg); }
  #confirmModal .bh-modal-x { flex: none; border: 0; background: transparent; color: var(--color-foreground-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-md); }
  #confirmModal .bh-modal-x:hover, #confirmModal .bh-modal-x:focus-visible { background: var(--color-background-secondary); color: var(--color-foreground-primary); }
  #confirmModal .bh-modal-form { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
  #confirmModal .bh-modal-form p { margin: 0; line-height: 1.5; }
  #confirmModal .modal-footer { margin: 0; padding: var(--space-md) 0 0; border-top: 1px solid var(--color-border-subtle); display: flex; justify-content: flex-end; gap: var(--space-sm); }
}

/* System unlock modal (same shell as the confirm modal) + account menu */
@layer app {
  #systemUnlock { padding: 0; }
  #systemUnlock .bh-modal-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) var(--space-md); border-bottom: 1px solid var(--color-border-subtle); }
  #systemUnlock .bh-modal-head-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-utility-warning-soft, #fff4d6); color: var(--color-utility-warning-bold, #b7791f); font-size: .9rem; }
  #systemUnlock .bh-modal-head-title { flex: 1; margin: 0; font-size: var(--font-size-lg); }
  #systemUnlock .bh-modal-x { flex: none; border: 0; background: transparent; color: var(--color-foreground-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-md); }
  #systemUnlock .bh-modal-x:hover, #systemUnlock .bh-modal-x:focus-visible { background: var(--color-background-secondary); color: var(--color-foreground-primary); }
  #systemUnlock .bh-modal-form { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
  #systemUnlock .bh-modal-form p { margin: 0; line-height: 1.5; }
  #systemUnlock .field { margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
  #systemUnlock .bh-modal-actions { margin: 0; padding: var(--space-md) 0 0; border-top: 1px solid var(--color-border-subtle); display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
  .bh-admin-account { margin-left: auto; }
  .bh-admin-topbar .breadcrumbs { flex: 0 1 auto; }
  .bh-admin-topbar .bh-admin-account { margin-left: auto; }
}

/* Admin profile */
@layer app {
  .bh-profile-card { background: var(--color-surface-base); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: var(--space-xl); max-width: 56rem; }
  .bh-profile-form { display: flex; flex-direction: column; gap: var(--space-lg); }
  .bh-fieldset { margin: 0; padding: var(--space-lg); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); display: flex; flex-direction: column; gap: var(--space-md); }
  .bh-fieldset legend { padding: 0 var(--space-xs); font-weight: var(--font-weight-semibold); display: inline-flex; align-items: center; gap: var(--space-xs); }
  .bh-fieldset-note { margin: 0; color: var(--color-foreground-secondary); font-size: var(--font-size-sm); }
  .bh-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-md); }
  .bh-profile-card .field { margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
  .bh-form-actions { display: flex; justify-content: flex-end; }
}

/* Account profile: password rows + live requirements */
@layer app {
  .bh-pw-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  @media (max-width: 720px) { .bh-pw-row { grid-template-columns: minmax(0, 1fr); } }
  .bh-pw-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); font-size: var(--font-size-sm); color: var(--color-foreground-secondary); }
  .bh-pw-rules li { display: flex; align-items: center; gap: var(--space-xs); }
  .bh-pw-rules li.is-met { color: var(--color-utility-success-bold, var(--color-utility-success)); }
  .bh-pw-rules i { font-size: .8rem; }
  .bh-form-actions { gap: var(--space-sm); justify-content: flex-start; align-items: center; }
  .bh-profile-card { max-width: 56rem; }
}

/* Admin: auction tag editor (chips + free text + suggestions) */
.bh-form-hint-inline { color: var(--color-foreground-muted); font-weight: var(--font-weight-regular, 400); font-size: var(--font-size-xs); }
.bh-tag-box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); min-height: 2.75rem; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-background-primary, transparent); cursor: text; }
.bh-tag-box:focus-within { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-brand-primary), transparent 80%); }
.bh-tag-chip { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: .2rem .35rem .2rem .7rem; border-radius: var(--radius-pill); background: var(--color-brand-primary); color: var(--color-brand-primary-contrast, #fff); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.4; }
.bh-tag-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .3rem; border-radius: var(--radius-pill); opacity: .8; }
.bh-tag-chip button:hover { opacity: 1; background: rgb(255 255 255 / .2); }
.bh-tag-input { flex: 1 1 12rem; min-width: 10rem; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; padding: .35rem 0; }
.bh-tag-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: var(--space-xs) 0; }
.bh-tag-pill { border: 1px solid var(--color-border-subtle); background: var(--color-background-secondary); color: var(--color-foreground-secondary); border-radius: var(--radius-pill); padding: .15rem .7rem; font-size: var(--font-size-xs); cursor: pointer; }
.bh-tag-pill:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.bh-tag-pill[hidden] { display: none; }

/* Admin: specific bidders (invite-only) editor */
.bh-bidder-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.bh-bidder-head .field-label { margin: 0; }
.bh-bidder-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-sm); margin-left: auto; }
.bh-bidder-count { font-weight: var(--font-weight-semibold); }
.bh-bidder-box { flex-direction: column; align-items: stretch; }
.bh-bidder-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); max-height: 11rem; overflow-y: auto; }
.bh-bidder-chips:empty { display: none; }
.bh-bidder-msg { margin: var(--space-xs) 0; min-height: 1.25rem; font-size: var(--font-size-sm); color: var(--color-foreground-secondary); }
.bh-bidder-msg.is-error { color: var(--color-feedback-danger, #b42318); }
.bh-bidders-field[hidden] { display: none; }