/* ============================================================
   AE_MBHortix — 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 {
  /* --- MB Hortix palette (BRANDING.md §3) ------------------------------------
     The token NAMES are inherited from the Auction Experts demo this sandbox is
     cloned from, so every existing rule keeps working; only the values change.
     Read them by role, not by colour word:

       --ae-navy    = Glasshouse #0E3B33  structure, headers, footer, body text
       --ae-teal    = Vine       #1F6F5C  interactive: links, ribbons, "winning"
       --ae-yellow  = Grow Lamp  #F2A93B  THE bid action, live, countdown accent
       --ae-crimson = Clay       #B3402B  outbid, errors, urgency

     Amber (Grow Lamp) is the only warm colour and is never decorative: if it is
     on screen, something is live or it is the primary action.
     TODO: placeholder branding - swap these values when MB Hortix signs off. */
  --ae-navy:        #0E3B33;  /* Glasshouse */
  --ae-navy-hover:  #0A2C26;
  --ae-teal:        #1F6F5C;  /* Vine */
  --ae-teal-deep:   #1A5C4D;  /* Vine as TEXT on light backgrounds (contrast) */
  --ae-teal-soft:   #E4EFEA;
  --ae-yellow:      #F2A93B;  /* Grow Lamp — the bid action, nothing else */
  --ae-yellow-hover:#E09724;
  --ae-yellow-soft: #FDF0DC;
  --ae-yellow-border:#F3D9A8;
  --ae-crimson:     #B3402B;  /* Clay */
  --ae-crimson-soft:#F7E4E0;

  /* --- Neutrals (Vellum / Stem / borders) -------------------- */
  --ae-canvas:      #F1F4EF;   /* Vellum, the page background */
  --ae-canvas-alt:  #F5F8F3;   /* table headers */
  --ae-utility:     #E7ECE5;   /* utility strip, quiet fills */
  --ae-surface:     #FFFFFF;
  --ae-border:      #D3DCD4;
  --ae-border-strong:#B4C2B7;
  --ae-border-faint:#E3EAE3;
  --ae-text:        #0E3B33;   /* Glasshouse */
  --ae-text-body:   #2C3F39;
  --ae-text-muted:  #4A5B54;   /* Stem */
  --ae-text-quiet:  #5C6C65;
  --ae-text-faint:  #7C8C84;
  --ae-text-ghost:  #92A099;
  --ae-on-navy:     #F1F4EF;
  --ae-on-navy-muted: rgba(241,244,239,.72);
  --ae-on-navy-line:  rgba(241,244,239,.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 (BRANDING.md §4) ---------------------------------
     Instrument Sans for all UI. Fraunces is the display face and IBM Plex Mono the
     data face; both are loaded on the host page and applied below rather than here,
     so --ae-font stays the single body-font hook every existing rule already uses. */
  --ae-font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ae-font-display: Fraunces, 'Playfair Display', Georgia, serif;
  --ae-font-data: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  /* 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;
}
/* Fraunces on h1-h3 only (BRANDING.md §4: "use with restraint"). It is a serif with real
   character, so it drops the uppercase + tracking the sans-serif original needed.
   MUST stay AFTER the rule above, which sets both of those on the same selectors.
   h4 keeps the body face: it is the lot-card title, in dense grids. */
h1, h2, h3 {
  font-family: var(--ae-font-display); font-weight: 600;
  text-transform: none; letter-spacing: 0;
}
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
   IBM Plex Mono here is functional, not stylistic (BRANDING.md §4): a rising bid and a
   ticking countdown must not change width on every update. .ae-amount already covers
   every price, increment and timer in this build, so this one rule does the job. */
.ae-amount { font-family: var(--ae-font-data); font-variant-numeric: tabular-nums;
             font-weight: 500; 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; } }