/* ============================================================
   AE_AuctionExperts — Demo platform theme
   Four brand colours, sampled from the logo.

   wwwroot/css/ae-theme.css — reference from App.razor / _Host.cshtml:
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/ae-theme.css" />
   ============================================================ */

:root {
  /* --- Brand (from the logo) -------------------------------- */
  --ae-navy:        #1C3E53;  /* structure: header text, headings, dark panels */
  --ae-navy-hover:  #14303F;
  --ae-teal:        #54A0B3;  /* interactive: lot ribbons, links, active underline */
  --ae-teal-deep:   #2E7A8E;  /* teal used as TEXT on light backgrounds (contrast) */
  --ae-teal-soft:   #E7F1F4;
  --ae-yellow:      #FACB12;  /* THE bid action — nothing else */
  --ae-yellow-hover:#E9BC08;
  --ae-yellow-soft: #FEF6DA;
  --ae-yellow-border:#F6E4A0;
  --ae-crimson:     #E20C4A;  /* urgency only: closing soon, outbid, live */
  --ae-crimson-soft:#FDE7EE;

  /* --- Neutrals --------------------------------------------- */
  --ae-canvas:      #F5F8F9;
  --ae-canvas-alt:  #F7FAFB;   /* table headers */
  --ae-utility:     #F2F5F6;   /* utility strip, quiet fills */
  --ae-surface:     #FFFFFF;
  --ae-border:      #E2E7EA;
  --ae-border-strong:#D6DDE1;
  --ae-border-faint:#EDF1F3;
  --ae-text:        #1C3E53;
  --ae-text-body:   #33404A;
  --ae-text-muted:  #5B6B75;
  --ae-text-quiet:  #6A7A83;
  --ae-text-faint:  #8C9AA3;
  --ae-text-ghost:  #9AA7AE;
  --ae-on-navy:     #EFF4F6;
  --ae-on-navy-muted: rgba(239,244,246,.72);
  --ae-on-navy-line:  rgba(239,244,246,.18);

  /* --- Bid state -------------------------------------------- */
  --ae-state-leading:      var(--ae-teal-deep);
  --ae-state-leading-bg:   var(--ae-teal-soft);
  --ae-state-outbid:       var(--ae-crimson);
  --ae-state-outbid-bg:    var(--ae-crimson-soft);
  --ae-state-neutral:      var(--ae-text-quiet);
  --ae-state-neutral-bg:   var(--ae-border-faint);

  /* --- Type -------------------------------------------------- */
  --ae-font: Montserrat, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Headings are UPPERCASE with tracking — matches the wordmark. */
  --ae-fs-hero:  44px;
  --ae-fs-h1:    34px;
  --ae-fs-h2:    26px;
  --ae-fs-h3:    20px;
  --ae-fs-lot:   13.5px;  /* lot title in a card */
  --ae-fs-base:  13px;
  --ae-fs-sm:    12px;
  --ae-fs-xs:    10.5px;  /* uppercase labels */
  --ae-track-head: .05em;
  --ae-track-caps: .1em;
  --ae-lh-body:  1.65;

  /* --- Space / shape ----------------------------------------- */
  --ae-space-1:4px; --ae-space-2:8px; --ae-space-3:12px;
  --ae-space-4:16px; --ae-space-5:22px; --ae-space-6:32px; --ae-space-7:48px;
  --ae-radius-sm:4px; --ae-radius:6px; --ae-radius-md:10px; --ae-radius-lg:12px;
  --ae-radius-pill:999px;
  --ae-shadow-card:  0 2px 10px rgba(28,62,83,.08);
  --ae-shadow-hover: 0 8px 20px rgba(28,62,83,.10);
  --ae-shadow-bar:   0 -6px 18px rgba(28,62,83,.09);

  /* --- Layout ------------------------------------------------ */
  --ae-utilitybar-h: 38px;
  --ae-topbar-h:     74px;
  --ae-sidebar-w:   236px;
  --ae-bidpanel-w:  400px;
  --ae-container:  1440px;
  --ae-touch-min:    48px;
}

/* ---------- Base -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--ae-canvas); color: var(--ae-text-body);
  font-family: var(--ae-font); font-size: var(--ae-fs-base);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  margin: 0; color: var(--ae-text); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ae-track-head); line-height: 1.2;
}
h1 { font-size: var(--ae-fs-h1); }
h2 { font-size: var(--ae-fs-h2); }
h3 { font-size: var(--ae-fs-h3); letter-spacing: var(--ae-track-caps); }
h4 { font-size: var(--ae-fs-lot); font-weight: 600; letter-spacing: .04em; line-height: 1.4; }
p  { line-height: var(--ae-lh-body); text-wrap: pretty; }
a  { color: var(--ae-navy); text-decoration: none; }
a:hover { color: var(--ae-teal); }

/* Money: always tabular, always this class. Format nl-NL: € 70.300,00 */
.ae-amount { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ae-text); }
.ae-label  { font-size: var(--ae-fs-xs); font-weight: 600; letter-spacing: .11em;
             text-transform: uppercase; color: var(--ae-text-faint); }

/* ---------- Buttons ----------------------------------------- */
.ae-btn { font-family: var(--ae-font); font-weight: 600; font-size: 11.5px;
  letter-spacing: var(--ae-track-caps); text-transform: uppercase;
  padding: 13px 20px; border-radius: var(--ae-radius); border: 1px solid transparent;
  cursor: pointer; min-height: var(--ae-touch-min); transition: background .12s, color .12s, border-color .12s; }
/* Yellow is reserved for placing a bid. Do not use it for anything else. */
.ae-btn--bid       { background: var(--ae-yellow); color: var(--ae-navy); font-weight: 700; }
.ae-btn--bid:hover { background: var(--ae-yellow-hover); }
.ae-btn--primary   { background: var(--ae-navy); color: #fff; }
.ae-btn--primary:hover { background: var(--ae-navy-hover); }
.ae-btn--secondary { background: var(--ae-surface); color: var(--ae-navy); border-color: var(--ae-navy); }
.ae-btn--secondary:hover { background: var(--ae-navy); color: #fff; }
.ae-btn--quiet     { background: var(--ae-surface); color: var(--ae-navy); border-color: var(--ae-border-strong); }
.ae-btn--quiet:hover { border-color: var(--ae-navy); }
.ae-btn--onnavy    { background: transparent; color: var(--ae-on-navy); border-color: rgba(239,244,246,.35); }
.ae-btn--onnavy:hover { background: rgba(239,244,246,.12); }
.ae-btn:disabled   { background: var(--ae-border-faint); color: var(--ae-text-ghost); cursor: not-allowed; }
.ae-btn:focus-visible { outline: 2px solid var(--ae-teal); outline-offset: 2px; }

/* ---------- Bid-state badges (the word is always rendered) --- */
.ae-badge { display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 8px; border-radius: var(--ae-radius-sm); white-space: nowrap; }
.ae-badge--leading, .ae-badge--reserve-met { color: var(--ae-state-leading); background: var(--ae-state-leading-bg); }
.ae-badge--outbid,  .ae-badge--live        { color: var(--ae-state-outbid);  background: var(--ae-state-outbid-bg); }
.ae-badge--none, .ae-badge--reserve-not-met{ color: var(--ae-state-neutral); background: var(--ae-state-neutral-bg); }
.ae-badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Teal number pill. Used BOTH as a free-standing pill (auction header) and, with
   .ae-lotcard__ribbon added, pinned to a photo corner. It must therefore stay
   statically positioned: when this class carried position:absolute itself, the
   header pill had no positioned ancestor and floated to the page's top-left corner.
   The corner pinning lives in .ae-lotcard__ribbon (custom.css) instead. */
.ae-lotno { display: inline-block; background: var(--ae-teal); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .09em;
  padding: 6px 11px; border-radius: var(--ae-radius); }

/* ---------- Cards, panels, media ---------------------------- */
.ae-card { background: var(--ae-surface); border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-md); overflow: hidden; }
.ae-card--interactive:hover { border-color: #C7D2D8; box-shadow: var(--ae-shadow-hover); }
.ae-panel__head { background: var(--ae-navy); color: var(--ae-on-navy); padding: var(--ae-space-4) 18px; }
/* Photos: lot 4:3, auction 21:9, lot hero 16:10. Always object-fit: cover. */
.ae-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ae-photo-frame { position: relative; overflow: hidden; }

/* ---------- Inputs ------------------------------------------ */
.ae-input { width: 100%; min-height: var(--ae-touch-min); padding: 12px;
  border: 1px solid var(--ae-border-strong); border-radius: 7px; background: var(--ae-surface);
  font-family: var(--ae-font); font-size: 15px; color: var(--ae-text); }
.ae-input:focus { outline: none; border: 1.5px solid var(--ae-navy); }
.ae-input--amount { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Countdown --------------------------------------- */
.ae-clock { display: flex; gap: 8px; }
.ae-clock__unit { flex: 1; text-align: center; padding: 8px 4px; border-radius: var(--ae-radius);
  background: rgba(239,244,246,.10); border: 1px solid rgba(239,244,246,.18); }
.ae-clock__num { font-size: 24px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ae-on-navy); }
.ae-clock__num--sec { color: var(--ae-yellow); }
.ae-clock__label { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: rgba(239,244,246,.55); margin-top: 5px; }
.ae-countdown--urgent { color: var(--ae-crimson); font-weight: 600; }  /* < 1 hour */

/* ---------- Nav & tabs -------------------------------------- */
.ae-utilitybar { height: var(--ae-utilitybar-h); background: var(--ae-utility);
  border-bottom: 1px solid var(--ae-border); font-size: var(--ae-fs-sm); color: var(--ae-text-muted);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--ae-space-6); }
.ae-topbar { height: var(--ae-topbar-h); background: var(--ae-surface);
  border-bottom: 1px solid var(--ae-border); display: flex; align-items: center;
  justify-content: space-between; gap: var(--ae-space-6); padding: 0 var(--ae-space-6); }
.ae-navlink { font-size: var(--ae-fs-sm); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ae-text-muted); padding-bottom: 4px;
  border-bottom: 2px solid transparent; }
.ae-navlink--active { color: var(--ae-navy); border-bottom-color: var(--ae-teal); }
.ae-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--ae-border); }
.ae-tab { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ae-text-quiet); padding-bottom: 12px; border-bottom: 2px solid transparent; cursor: pointer; }
.ae-tab--active { color: var(--ae-navy); border-bottom-color: var(--ae-navy); }

/* Category tree — SINGLE-SELECT, no checkboxes. */
.ae-cat { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 11px; border-radius: var(--ae-radius); color: var(--ae-text-body); cursor: pointer; }
.ae-cat:hover { background: var(--ae-utility); }
.ae-cat--active { background: var(--ae-navy); color: #fff; font-weight: 600; }
.ae-cat--child { padding-left: 24px; }
.ae-cat__count { font-size: var(--ae-fs-sm); color: var(--ae-text-ghost); }

/* ---------- Layout ------------------------------------------ */
.ae-lot-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.ae-auction-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.ae-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) var(--ae-bidpanel-w); gap: 36px; }
.ae-browse-layout { display: grid; grid-template-columns: var(--ae-sidebar-w) minmax(0,1fr); gap: 26px; }

@media (max-width: 1200px) { .ae-lot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px) {
  .ae-detail-layout, .ae-browse-layout, .ae-auction-grid { grid-template-columns: 1fr; }
  .ae-lot-grid { grid-template-columns: 1fr; }
  .ae-bidbar-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--ae-surface); border-top: 1px solid var(--ae-border);
    padding: 12px var(--ae-space-4) var(--ae-space-4); box-shadow: var(--ae-shadow-bar); }
  h1 { font-size: 24px; } h2 { font-size: 19px; } h3 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }