/* ===========================================================================
   Seer Procurement Hub look (vendor portal and its sign-in page).
   Loaded after site.css only when UI_THEME=hub (the default). Everything is scoped to body.hub or to the hub-/hl- classes, so removing
   this file, or setting UI_THEME=classic, brings the earlier look back unchanged.
   =========================================================================== */
body.hub {
  --hb-bg: #f7f8fa; --hb-surface: #fff; --hb-ink: #0b1a47; --hb-ink2: #1e2a4a; --hb-muted: #47516a; --hb-subtle: #687186;
  --hb-line: #d9dee7; --hb-line2: #eef0f3; --hb-accent: #2860f8; --hb-accent-soft: #eef3ff; --hb-green: #0f8a5f; --hb-green-bg: #e4f5ee;
  --hb-amber: #9a5b00; --hb-amber-bg: #fff3dc; --hb-red: #b4233d; --hb-red-bg: #fde8ec; --hb-r: 8px;
  /* remap the earlier design tokens so every existing page picks the new look up */
  --accent: var(--hb-accent); --accent-hover: #1d4fd8; --accent-pressed: #1a43b8; --accent-light: var(--hb-accent-soft); --accent-border: #c6d6ff;
  --text: var(--hb-ink); --text-muted: var(--hb-muted); --text-subtle: var(--hb-subtle);
  --border: var(--hb-line); --border-strong: #c3cad6; --hover: #f1f4f9; --divider: var(--hb-line2);
  --app-accent: var(--hb-accent); --app-accent-hover: #1d4fd8; --app-accent-light: var(--hb-accent-soft); --app-accent-border: #c6d6ff;
  --app-text: var(--hb-ink); --app-text-muted: var(--hb-muted); --app-text-subtle: var(--hb-subtle);
  --app-border: var(--hb-line); --app-border-strong: #c3cad6; --app-hover: #f1f4f9; --app-surface: var(--hb-surface);
  --app-radius: 8px; --app-radius-sm: 6px; --app-shadow: none;
  --success: var(--hb-green); --success-bg: var(--hb-green-bg); --warning: var(--hb-amber); --warning-bg: var(--hb-amber-bg);
  --danger: var(--hb-red); --danger-bg: var(--hb-red-bg); --info: var(--hb-accent); --info-bg: var(--hb-accent-soft);
  margin: 0; background: var(--hb-bg); color: var(--hb-ink);
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased;
}
body.hub a { color: var(--hb-accent); }
body.hub a:hover { text-decoration: none; color: #1d4fd8; }
/* A link styled as a filled primary button keeps its white label (the blue link colour above would match the background):
   covers btn--primary, app-btn--primary, wb-btn--primary and any other class ending in --primary. */
body.hub a[class*="--primary"], body.hub a[class*="--primary"]:hover { color: #fff !important; }

/* ---- shell ---- */
.hub-app { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.hub-side { background: var(--hb-surface); border-right: 1px solid var(--hb-line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.hub-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; color: var(--hb-ink) !important; }
.hub-brand img { width: 32px; height: 32px; object-fit: contain; }
.hub-brand strong { display: block; font-size: 14.5px; line-height: 1.15; color: var(--hb-ink); }
.hub-brand small { display: block; font-size: 10px; letter-spacing: .09em; color: var(--hb-subtle); margin-top: 2px; }
.hub-nav { padding: 6px 10px; flex: 1; }
.hub-nav__label { font-size: 11.5px; font-weight: 600; color: var(--hb-subtle); padding: 14px 10px 6px; }
.hub-nav__item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 6px; color: var(--hb-ink2) !important; font-size: 14px; position: relative; margin: 1px 0; }
.hub-nav__item svg { color: var(--hb-muted); flex: none; }
.hub-nav__item:hover { background: #f1f4f9; }
.hub-nav__item.is-active { background: var(--hb-accent-soft); color: var(--hb-accent) !important; font-weight: 600; }
.hub-nav__item.is-active svg { color: var(--hb-accent); }
.hub-nav__item.is-active::before { content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--hb-accent); }
.hub-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--hb-accent); color: #fff; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.hub-side__foot { padding: 14px 18px 18px; border-top: 1px solid var(--hb-line2); font-size: 13px; }
.hub-side__foot a { display: flex; gap: 8px; align-items: center; color: var(--hb-muted) !important; }

.hub-main { min-width: 0; display: flex; flex-direction: column; }
.hub-top { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 28px; background: var(--hb-surface); border-bottom: 1px solid var(--hb-line); position: sticky; top: 0; z-index: 30; }
.hub-apps { color: var(--hb-muted); display: inline-flex; padding: 6px; border-radius: 6px; }
.hub-search { flex: 0 1 460px; display: flex; align-items: center; gap: 8px; background: #f1f3f7; border: 1px solid transparent; border-radius: 6px; padding: 0 12px; height: 36px; color: var(--hb-subtle); }
.hub-search:focus-within { background: #fff; border-color: var(--hb-accent); box-shadow: 0 0 0 3px #dbe6ff; }
.hub-search input { border: 0; background: transparent; outline: none; flex: 1; font: inherit; color: var(--hb-ink); min-width: 0; }
.hub-top__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hub-icon-btn { position: relative; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--hb-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hub-icon-btn:hover { background: #f1f4f9; }
.hub-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--hb-red); border: 2px solid #fff; }
.hub-user { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 4px 8px; border-radius: 8px; cursor: pointer; color: var(--hb-ink); font: inherit; text-align: left; }
.hub-user:hover { background: #f1f4f9; }
.hub-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--hb-accent); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.hub-user__t strong { display: block; font-size: 13px; line-height: 1.2; }
.hub-user__t small { display: block; font-size: 11.5px; color: var(--hb-subtle); }

.hub-content { padding: 22px 28px 48px; max-width: 1280px; width: 100%; box-sizing: border-box; }
.hub-crumb { font-size: 12.5px; color: var(--hb-subtle); display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.hub-crumb a { color: var(--hb-subtle) !important; }
.hub-crumb a:hover { color: var(--hb-accent) !important; }
.hub-crumb b { font-weight: 500; color: var(--hb-accent); }
.hub-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.hub-head h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--hb-ink); }
.hub-head p { margin: 6px 0 0; color: var(--hb-muted); font-size: 14.5px; max-width: 760px; }
.hub-head__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.hub-ai { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; vertical-align: middle; }

/* flyouts keep their markup; just the new surface */
body.hub .flyout { border: 1px solid var(--hb-line); border-radius: 10px; box-shadow: 0 8px 28px rgba(11, 26, 71, .14); }

/* ---- shared components, restyled (cards, tables, buttons, forms, pills) ---- */
body.hub .card { background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-r); box-shadow: none; }
body.hub .card__head { padding: 14px 18px; border-bottom: 1px solid var(--hb-line2); }
body.hub .card__title { font-size: 15px; font-weight: 700; color: var(--hb-ink); }
body.hub .card__foot { border-top: 1px solid var(--hb-line2); }

body.hub .kpi-grid, body.hub .app-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
body.hub .kpi, body.hub .app-kpi { background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-r); box-shadow: none; padding: 16px 18px; text-decoration: none; color: var(--hb-ink); }
body.hub a.app-kpi:hover { border-color: #aebcf0; }
body.hub .app-kpi { display: block; }
body.hub .app-kpi__icon { display: none; }
body.hub .app-kpi > div { display: flex; flex-direction: column-reverse; gap: 6px; }
body.hub .app-kpi__label, body.hub .kpi__label { font-size: 12.5px; color: var(--hb-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
body.hub .app-kpi__value, body.hub .kpi__value { font-size: 28px; line-height: 1.1; font-weight: 700; color: var(--hb-ink); letter-spacing: -.01em; }
body.hub .kpi__note { font-size: 12.5px; color: var(--hb-green); }
body.hub .kpi--accent, body.hub .kpi--warning, body.hub .kpi--danger, body.hub .kpi--success { border-top: 1px solid var(--hb-line); }

body.hub .app-table-wrap, body.hub .table-wrap { background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-r); overflow-x: auto; }
body.hub .card .app-table-wrap, body.hub .card .table-wrap { border: 0; border-radius: 0; }
body.hub .app-table th, body.hub .table th { background: #fff; color: var(--hb-subtle); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 12px 16px; border-bottom: 1px solid var(--hb-line); text-align: left; }
body.hub .app-table td, body.hub .table td { padding: 14px 16px; border-bottom: 1px solid var(--hb-line2); color: var(--hb-ink2); }
body.hub .app-table tbody tr:hover, body.hub .table tbody tr:hover { background: #f8faff; }
body.hub .app-table__link, body.hub .table__link { color: var(--hb-ink) !important; font-weight: 700; }
body.hub .app-table__link:hover { color: var(--hb-accent) !important; }
body.hub .muted, body.hub .subtle { color: var(--hb-muted); }

body.hub .pill { background: transparent; padding: 0; font-weight: 500; font-size: 13px; }
body.hub .pill--neutral { color: var(--hb-muted); } body.hub .pill--info { color: var(--hb-accent); } body.hub .pill--success { color: var(--hb-green); }
body.hub .pill--warning { color: var(--hb-amber); } body.hub .pill--danger { color: var(--hb-red); } body.hub .pill--purple { color: #6d3fc0; }

body.hub .btn, body.hub .app-btn { border-radius: 6px; font-weight: 600; font-size: 13.5px; border: 1px solid #c3cad6; background: #fff; color: var(--hb-ink); padding: 8px 14px; line-height: 1.25; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
body.hub .btn:hover, body.hub .app-btn:hover { background: #f1f4f9; color: var(--hb-ink); }
body.hub .btn--primary, body.hub .app-btn--primary { background: var(--hb-accent); border-color: var(--hb-accent); color: #fff !important; }
body.hub .btn--primary:hover, body.hub .app-btn--primary:hover { background: #1d4fd8; border-color: #1d4fd8; color: #fff !important; }
body.hub .btn--success { background: var(--hb-green); border-color: var(--hb-green); color: #fff; }
body.hub .btn--danger { color: var(--hb-red); border-color: #efc2cb; }
body.hub .btn--sm { padding: 5px 11px; font-size: 12.5px; }

body.hub .field__input, body.hub .field__select, body.hub .field__textarea, body.hub .app-field__input, body.hub .app-field__select {
  border: 1px solid #c3cad6; border-radius: 6px; background: #fff; color: var(--hb-ink); font: inherit; padding: 8px 11px; }
body.hub .field__input:focus, body.hub .field__select:focus, body.hub .field__textarea:focus, body.hub .app-field__input:focus, body.hub .app-field__select:focus { outline: none; border-color: var(--hb-accent); box-shadow: 0 0 0 3px #dbe6ff; }
body.hub .field__label, body.hub .app-field__label { color: var(--hb-muted); font-size: 12.5px; font-weight: 600; }
body.hub .app-filterbar { background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-r); padding: 12px 16px; margin-bottom: 14px; }
body.hub .alert { border-radius: var(--hb-r); }
body.hub .tabs__item.is-active, body.hub .app-tabs__item.is-active { color: var(--hb-accent); border-color: var(--hb-accent); }
body.hub .empty { background: var(--hb-surface); border: 1px dashed var(--hb-line); border-radius: var(--hb-r); }

/* ---- new components used by the Hub pages ---- */
.hub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.hub-stat { background: var(--hb-surface, #fff); border: 1px solid #d9dee7; border-radius: 8px; padding: 16px 18px; }
.hub-stat__l { font-size: 13px; color: #47516a; }
.hub-stat__v { font-size: 30px; font-weight: 700; line-height: 1.15; margin: 6px 0 4px; letter-spacing: -.01em; color: #0b1a47; }
.hub-stat__v small { font-size: 15px; font-weight: 600; }
.hub-stat__n { font-size: 12.5px; color: #0f8a5f; }
.hub-stat__n.warn { color: #9a5b00; } .hub-stat__n.bad { color: #b4233d; } .hub-stat__n.mute { color: #687186; }
.hub-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.hub-grid--2 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.hub-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-grid--side { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.hub-panel { background: #fff; border: 1px solid #d9dee7; border-radius: 8px; padding: 18px 20px; min-width: 0; }
.hub-panel__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.hub-panel__h h2 { margin: 0; font-size: 16px; font-weight: 700; color: #0b1a47; }
.hub-panel__h span, .hub-panel__h a { font-size: 13px; color: #687186; }
.hub-panel__h a { color: #2860f8; }
.hub-big { font-size: 28px; font-weight: 700; color: #0b1a47; letter-spacing: -.01em; }
.hub-big small { font-size: 13px; font-weight: 600; color: #0f8a5f; margin-left: 6px; }
.hub-bars { display: flex; align-items: flex-end; gap: 14px; height: 130px; margin-top: 14px; }
.hub-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; font-size: 12px; color: #687186; }
.hub-bars i { display: block; width: 100%; max-width: 38px; border-radius: 4px 4px 0 0; background: #2860f8; min-height: 3px; }
.hub-bars i.is-future { background: #c9d6f7; }
.hub-donut { display: flex; align-items: center; gap: 26px; margin-top: 12px; }
.hub-donut__ring { width: 124px; height: 124px; border-radius: 50%; position: relative; flex: none; }
.hub-donut__ring::after { content: ''; position: absolute; inset: 15px; border-radius: 50%; background: #fff; }
.hub-donut__mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; font-size: 20px; font-weight: 700; color: #0b1a47; }
.hub-donut__mid small { font-size: 11px; font-weight: 400; color: #687186; }
.hub-legend { flex: 1; display: grid; gap: 9px; font-size: 13.5px; }
.hub-legend div { display: flex; align-items: center; gap: 9px; color: #1e2a4a; }
.hub-legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.hub-legend b { margin-left: auto; color: #0b1a47; }
.hub-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.hub-table th { text-align: left; font-size: 12px; font-weight: 600; color: #687186; padding: 10px 8px; border-bottom: 1px solid #d9dee7; }
.hub-table td { padding: 12px 8px; border-bottom: 1px solid #eef0f3; color: #1e2a4a; }
.hub-table tr:last-child td { border-bottom: 0; }
.hub-table .num, .hub-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hub-table td:first-child { font-weight: 700; color: #0b1a47; }
.hub-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.hub-st.ok { color: #0f8a5f; } .hub-st.warn { color: #9a5b00; } .hub-st.info { color: #2860f8; } .hub-st.bad { color: #b4233d; } .hub-st.mute { color: #687186; }
.hub-feed { display: grid; gap: 0; margin-top: 8px; }
.hub-feed__i { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid #eef0f3; align-items: flex-start; }
.hub-feed__i:last-child { border-bottom: 0; }
.hub-feed__av { width: 30px; height: 30px; border-radius: 50%; background: #e8edf7; color: #1e2a4a; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hub-feed__av.g { background: #e4f5ee; color: #0f8a5f; } .hub-feed__av.b { background: #eef3ff; color: #2860f8; } .hub-feed__av.a { background: #fff3dc; color: #9a5b00; }
.hub-feed__t { font-size: 13.5px; color: #0b1a47; line-height: 1.35; }
.hub-feed__m { font-size: 12px; color: #687186; margin-top: 2px; }
.hub-track { display: flex; align-items: flex-start; margin-top: 14px; }
.hub-track__s { flex: 1; text-align: center; position: relative; font-size: 12.5px; color: #687186; }
.hub-track__s::before { content: ''; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: #d9dee7; }
.hub-track__s:first-child::before { display: none; }
.hub-track__s.done::before, .hub-track__s.now::before { background: #0f8a5f; }
.hub-track__d { position: relative; z-index: 1; width: 24px; height: 24px; margin: 0 auto 6px; border-radius: 50%; border: 2px solid #d9dee7; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #687186; }
.hub-track__s.done .hub-track__d { background: #0f8a5f; border-color: #0f8a5f; color: #fff; }
.hub-track__s.now .hub-track__d { border-color: #2860f8; color: #2860f8; }
.hub-track__s b { display: block; color: #0b1a47; font-weight: 600; }
.hub-chip { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: #eef3ff; color: #2860f8; }
.hub-chip.ok { background: #e4f5ee; color: #0f8a5f; }
.hub-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.hub-filter a { padding: 6px 14px; border-radius: 99px; border: 1px solid #d9dee7; background: #fff; color: #1e2a4a !important; font-size: 13px; }
.hub-filter a.is-on { background: #0b1a47; border-color: #0b1a47; color: #fff !important; }
.hub-filter a b { margin-left: 6px; color: #687186; font-weight: 600; } .hub-filter a.is-on b { color: #c9d1ea; }
.hub-day { font-size: 12px; font-weight: 600; letter-spacing: .05em; color: #687186; margin: 18px 0 4px; }
.hub-contact { display: flex; gap: 14px; align-items: center; }
.hub-contact__av { width: 40px; height: 40px; border-radius: 50%; background: #e8edf7; color: #0b1a47; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.hub-empty { padding: 26px; text-align: center; color: #687186; font-size: 14px; }

@media (max-width: 1100px) { .hub-grid--2, .hub-grid--3, .hub-grid--side { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .hub-app { grid-template-columns: 1fr; }
  .hub-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid #d9dee7; }
  .hub-nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 10px; flex-basis: 100%; }
  .hub-nav__label, .hub-side__foot { display: none; }
  .hub-nav__item.is-active::before { display: none; }
  .hub-top { padding: 0 14px; } .hub-user__t { display: none; } .hub-apps { display: none; }
  .hub-content { padding: 16px 14px 40px; }
  .hub-head h1 { font-size: 23px; }
}
@media print { .hub-side, .hub-top { display: none !important; } .hub-app { display: block; } }

/* ===========================================================================
   Sign-in page (hl- classes, no body.hub)
   =========================================================================== */
.hl-body { margin: 0; font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; color: #0b1a47; background: #fff; -webkit-font-smoothing: antialiased; }
.hl-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.hl-left { background: #eef2fb; padding: 40px 6vw 28px; display: flex; flex-direction: column; }
.hl-brand { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #47516a; }
.hl-brand img { height: 28px; }
.hl-brand b { color: #0b1a47; }
.hl-kicker { margin-top: 56px; font-size: 11px; letter-spacing: .08em; color: #2860f8; font-weight: 600; }
.hl-left h1 { margin: 10px 0 14px; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; font-weight: 700; }
.hl-left h1 span { color: #2860f8; }
.hl-lead { font-size: 15.5px; line-height: 1.5; color: #1e2a4a; max-width: 470px; margin: 0 0 26px; }
.hl-steps { list-style: none; margin: 0; padding: 0; max-width: 470px; }
.hl-steps li { display: flex; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid #d5dcec; }
.hl-steps li:last-child { border-bottom: 1px solid #d5dcec; }
.hl-ic { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #d5dcec; display: inline-flex; align-items: center; justify-content: center; color: #2860f8; flex: none; }
.hl-steps b { font-weight: 600; font-size: 14.5px; } .hl-steps b i { font-style: normal; color: #2860f8; margin-right: 8px; font-size: 12px; font-weight: 600; }
.hl-steps small { display: block; font-size: 13px; color: #47516a; margin-top: 1px; }
.hl-foot { margin-top: auto; padding-top: 24px; font-size: 12px; color: #687186; }
.hl-right { display: flex; align-items: center; justify-content: center; padding: 40px 6vw; }
.hl-card { width: 100%; max-width: 360px; }
.hl-card h2 { margin: 0 0 6px; font-size: 24px; font-weight: 700; }
.hl-sub { font-size: 13.5px; color: #47516a; margin: 0 0 22px; }
.hl-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #f1f3f7; padding: 4px; border-radius: 8px; margin-bottom: 18px; }
.hl-pick label { position: relative; }
.hl-pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hl-pick span { display: block; text-align: center; padding: 8px 6px; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: #47516a; }
.hl-pick input:checked + span { background: #fff; color: #0b1a47; box-shadow: 0 1px 3px rgba(11, 26, 71, .15); }
.hl-pick input:focus-visible + span { outline: 2px solid #2860f8; }
.hl-f { margin-bottom: 14px; }
.hl-f label { display: block; font-size: 12.5px; color: #47516a; margin-bottom: 5px; }
.hl-f input[type=text], .hl-f input[type=password] { width: 100%; box-sizing: border-box; border: 1px solid #c3cad6; border-radius: 6px; padding: 10px 12px; font: inherit; font-size: 14px; color: #0b1a47; background: #f8faff; }
.hl-f input:focus { outline: none; border-color: #2860f8; box-shadow: 0 0 0 3px #dbe6ff; background: #fff; }
.hl-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin: 6px 0 16px; }
.hl-row a { color: #2860f8; }
.hl-row label { display: flex; gap: 8px; align-items: center; color: #47516a; }
.hl-btn { width: 100%; border: 0; border-radius: 6px; padding: 12px; font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; background: #0b1a47; color: #fff; }
.hl-btn:hover { background: #17275f; }
.hl-btn--ms { background: #fff; color: #0b1a47; border: 1px solid #c3cad6; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-weight: 500; margin-top: 0; box-sizing: border-box; }
.hl-btn--ms:hover { background: #f1f4f9; }
.hl-or { text-align: center; font-size: 12px; color: #687186; margin: 16px 0; position: relative; }
.hl-or::before, .hl-or::after { content: ''; position: absolute; top: 50%; width: 42%; height: 1px; background: #e1e5ee; }
.hl-or::before { left: 0; } .hl-or::after { right: 0; }
.hl-alert { padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }
.hl-alert.bad { background: #fde8ec; color: #8f1b31; } .hl-alert.ok { background: #e4f5ee; color: #0a6b49; }
.hl-reg { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eef0f3; font-size: 13.5px; color: #47516a; }
.hl-reg a { color: #2860f8; font-weight: 500; }
.hl-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; }
.hl-links a { color: #687186; }
@media (max-width: 880px) { .hl-page { grid-template-columns: 1fr; } .hl-left { padding: 28px 22px; } .hl-left h1 { font-size: 34px; } .hl-kicker { margin-top: 28px; } .hl-right { padding: 28px 22px 40px; } }

/* ===========================================================================
   Procurement staff: top navigation, dropdown menus, AI agents tab, overview
   =========================================================================== */
.hub-app--top { display: block; }
.hub-content--wide { max-width: 1520px; }
.hub-tbar { display: flex; align-items: center; gap: 22px; height: 56px; padding: 0 28px; background: #fff; border-bottom: 1px solid #d9dee7; position: sticky; top: 0; z-index: 40; }
.hub-tbrand { display: flex; align-items: center; gap: 10px; color: #0b1a47 !important; font-size: 15px; white-space: nowrap; flex-shrink: 0; margin-right: 6px; }
.hub-tbrand img { height: 26px; }
.hub-tnav { display: flex; align-items: stretch; gap: 2px; height: 100%; }
.hub-tnav__i { display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; height: 100%; border: 0; background: transparent; font: inherit; font-size: 14px; color: #1e2a4a !important; cursor: pointer; position: relative; white-space: nowrap; text-decoration: none; }
.hub-tnav__i:hover { color: #2860f8 !important; }
.hub-tnav__i.is-active { color: #2860f8 !important; font-weight: 600; }
.hub-tnav__i.is-active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: #2860f8; border-radius: 2px 2px 0 0; }
.hub-dd { position: relative; display: flex; align-items: stretch; }
.hub-dd__panel { display: none; position: absolute; top: 100%; left: -8px; min-width: 330px; background: #fff; border: 1px solid #d9dee7; border-radius: 10px; box-shadow: 0 12px 32px rgba(11, 26, 71, .16); padding: 8px; z-index: 50; }
.hub-dd:hover .hub-dd__panel, .hub-dd:focus-within .hub-dd__panel, .hub-dd.is-open .hub-dd__panel { display: block; }
.hub-dd__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: #0b1a47 !important; }
.hub-dd__item:hover, .hub-dd__item.is-active { background: #f1f5ff; }
.hub-dd__ic { width: 32px; height: 32px; border-radius: 8px; background: #eef3ff; color: #2860f8; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hub-dd__t b { display: block; font-size: 13.5px; font-weight: 600; }
.hub-dd__t small { display: block; font-size: 12px; color: #687186; margin-top: 1px; }
.hub-aichip { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 99px; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; vertical-align: middle; margin-left: 4px; }
.hub-search--sm { flex: 0 1 200px; }
.hub--staff .hub-top__right { margin-left: auto; }
.hub-aitab { position: fixed; right: 0; top: 46%; z-index: 45; border: 0; background: #0b1a47; color: #fff; padding: 14px 8px; border-radius: 8px 0 0 8px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em; writing-mode: vertical-rl; box-shadow: -2px 2px 10px rgba(11, 26, 71, .25); }
.hub-aitab:hover { background: #17275f; }
.hub-aipanel { position: fixed; right: 0; top: 56px; bottom: 0; width: 340px; max-width: 92vw; background: #fff; border-left: 1px solid #d9dee7; box-shadow: -8px 0 28px rgba(11, 26, 71, .12); z-index: 60; padding: 18px 18px 24px; overflow-y: auto; }
.hub-aipanel[hidden] { display: none; }
.hub-aipanel__h { display: flex; justify-content: space-between; align-items: center; font-size: 17px; margin-bottom: 4px; }
.hub-aipanel__h button { border: 0; background: transparent; font-size: 16px; cursor: pointer; color: #687186; }
.hub-aipanel p { margin: 0 0 14px; font-size: 13px; color: #47516a; }
.hub-aipanel__i { display: block; padding: 12px 14px; border: 1px solid #d9dee7; border-radius: 8px; margin-bottom: 10px; color: #0b1a47 !important; }
.hub-aipanel__i:hover { border-color: #2860f8; background: #f8faff; }
.hub-aipanel__i b { display: block; font-size: 14px; } .hub-aipanel__i small { display: block; font-size: 12.5px; color: #47516a; margin-top: 3px; }

.hw-section { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; color: #687186; margin: 4px 0 10px; }
.hw-section button { border: 0; background: transparent; color: #2860f8; font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0; cursor: pointer; }
.hw-section em { font-style: normal; font-weight: 400; letter-spacing: 0; font-size: 13px; }
.hw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 22px; align-items: start; }
.hw-card { background: #fff; border: 1px solid #d9dee7; border-radius: 8px; padding: 16px 16px 8px; }
.hw-card__h { display: flex; justify-content: space-between; align-items: center; color: #0b1a47 !important; font-size: 14px; margin-bottom: 8px; }
.hw-card__h span { color: #687186; font-size: 18px; }
.hw-card__n { font-size: 32px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; color: #0b1a47; }
.hw-card__c { font-size: 12.5px; color: #47516a; margin-bottom: 12px; }
.hw-tiles { border-top: 1px solid #eef0f3; }
.hw-tile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid #eef0f3; color: #1e2a4a !important; font-size: 13.5px; }
.hw-tile:last-child { border-bottom: 0; }
.hw-tile:hover .hw-tile__l { color: #2860f8; }
.hw-pill { display: inline-flex; flex-direction: column; align-items: center; min-width: 56px; padding: 3px 8px; border-radius: 6px; background: #eef1f6; color: #0b1a47; line-height: 1.15; }
.hw-pill b { font-size: 14px; } .hw-pill small { font-size: 10.5px; color: #687186; }
.hw-pill.warn { background: #fff3dc; } .hw-pill.warn b { color: #9a5b00; } .hw-pill.bad { background: #fde8ec; } .hw-pill.bad b { color: #b4233d; } .hw-pill.ok { background: #e4f5ee; } .hw-pill.ok b { color: #0f8a5f; }
.hw-go { color: #687186; font-size: 18px; }
.hw-cards.is-collapsed .hw-tiles { display: none; } .hw-cards.is-collapsed .hw-card { padding-bottom: 14px; }
.hw-cards.is-collapsed .hw-card__c { margin-bottom: 0; }
.hw-kpis .hub-stat__l { font-size: 11.5px; letter-spacing: .07em; font-weight: 700; color: #687186; }
.hub-bars--tall { height: 190px; gap: 10px; }
.hw-rank { display: grid; gap: 14px; margin-top: 12px; }
.hw-rank span { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; }
.hw-rank a { color: #0b1a47 !important; } .hw-rank b { color: #0b1a47; }
.hw-rank i { display: block; height: 6px; border-radius: 3px; background: #eef0f3; } .hw-rank u { display: block; height: 100%; border-radius: 3px; background: #2860f8; }
.hw-boards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.hw-board { display: block; color: inherit !important; } .hw-board:hover { border-color: #aebcf0; }
.hw-bars { display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; height: 110px; margin-top: 10px; }
.hw-bars div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; flex: 1; height: 100%; font-size: 11px; color: #687186; text-align: center; }
.hw-bars b { font-size: 14px; color: #0b1a47; } .hw-bars i { display: block; width: 100%; max-width: 30px; border-radius: 4px 4px 0 0; background: #2860f8; }
.hw-chev { display: flex; margin-top: 14px; }
.hw-chev div { flex: 1; text-align: center; padding: 10px 2px; background: #eef3ff; font-size: 11px; color: #47516a; position: relative; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.hw-chev div:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.hw-chev div:nth-child(2) { background: #dbe6ff; } .hw-chev div:nth-child(3) { background: #bcd0ff; } .hw-chev div:nth-child(4) { background: #5b86f7; color: #fff; } .hw-chev div:nth-child(5) { background: #0b1a47; color: #fff; }
.hw-chev b { display: block; font-size: 17px; }
.hw-lines { display: grid; gap: 9px; margin-top: 12px; }
.hw-lines div { display: flex; justify-content: space-between; font-size: 13.5px; color: #1e2a4a; } .hw-lines b { color: #0b1a47; }
.hw-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 9px; background: #2860f8; }
.hw-dot.ok { background: #0f8a5f; } .hw-dot.warn { background: #c77700; } .hw-dot.bad { background: #b4233d; }

@media (max-width: 1000px) { .hub-tbar { padding: 0 14px; gap: 10px; overflow-x: auto; } .hub-search--sm, .hub--staff .hub-user__t { display: none; } .hub-dd__panel { position: fixed; left: 8px; right: 8px; top: 56px; min-width: 0; } }

/* ===========================================================================
   Decision colours (both portals): approval = green, rejection = red, warning / partial / hold / change = yellow.
   Matched by meaning (class, button value, or the decision field of the form), so every approve / reject button
   gets the same look wherever it is.
   =========================================================================== */
html:root body.hub :is(.btn--success, .app-btn--success, button[value="approve" i], button[value="accept" i], button[value="accepted" i], [data-accept-all],
  form:has(> input[name="decision"][value="approve" i]) button[type="submit"], form:has(input[name="decision"][value="accept" i]) button[type="submit"]) {
  background: #e7f8f1 !important; border: 1px solid #a7e3c9 !important; color: #047857 !important; box-shadow: 0 1px 2px rgba(4,120,87,.08) !important; }
html:root body.hub :is(.btn--success, .app-btn--success, button[value="approve" i], button[value="accept" i], button[value="accepted" i], [data-accept-all],
  form:has(> input[name="decision"][value="approve" i]) button[type="submit"]):hover { background: #d3f2e5 !important; border-color: #10b981 !important; }

html:root body.hub :is(.btn--danger, .app-btn--danger, button[value="reject" i], button[value="rejected" i], button[value="decline" i], [data-modal-open="rejectModal"], .vs-r,
  form:has(> input[name="decision"][value="reject" i]) button[type="submit"], button[data-confirm^="Reject"]) {
  background: #ffeef1 !important; border: 1px solid #fbc4cf !important; color: #be123c !important; box-shadow: 0 1px 2px rgba(190,18,60,.08) !important; }
html:root body.hub :is(.btn--danger, .app-btn--danger, button[value="reject" i], button[value="decline" i], [data-modal-open="rejectModal"], .vs-r,
  form:has(> input[name="decision"][value="reject" i]) button[type="submit"], button[data-confirm^="Reject"]):hover { background: #ffdfe5 !important; border-color: #f43f5e !important; }

html:root body.hub :is(.btn--warning, .app-btn--warning, button[value="hold" i], button[value="onhold" i], button[value="change" i], button[value="partial" i],
  form:has(> input[name="decision"][value="hold" i]) button[type="submit"]) {
  background: #fff6e5 !important; border: 1px solid #f8d48a !important; color: #b45309 !important; box-shadow: 0 1px 2px rgba(180,83,9,.08) !important; }
html:root body.hub :is(.btn--warning, .app-btn--warning, button[value="hold" i], button[value="change" i], button[value="partial" i]):hover { background: #ffedc7 !important; border-color: #f59e0b !important; }

/* status chips everywhere: soft shade background with the matching text colour */
html:root body.hub :is(.pill--success, .badge--success) { background: #e7f8f1 !important; color: #047857 !important; }
html:root body.hub :is(.pill--danger, .badge--danger) { background: #ffeef1 !important; color: #be123c !important; }
html:root body.hub :is(.pill--warning, .badge--warning) { background: #fff6e5 !important; color: #b45309 !important; }
html:root body.hub :is(.pill--success, .pill--danger, .pill--warning) { border-radius: 99px; padding: 2px 10px; font-weight: 600; }

/* alerts with a decision tone */
html:root body.hub .alert--success { background: #e7f8f1 !important; border-color: #a7e3c9 !important; }
html:root body.hub .alert--danger { background: #ffeef1 !important; border-color: #fbc4cf !important; }
html:root body.hub .alert--warning { background: #fff6e5 !important; border-color: #f8d48a !important; }

/* line answer choices (supplier PO response): the selected answer takes its decision colour */
html:root body.hub label:has(> input[type="radio"][value="Accept"]:checked) > span { background: #e7f8f1 !important; color: #047857 !important; border-color: #a7e3c9 !important; }
html:root body.hub label:has(> input[type="radio"][value="Reject"]:checked) > span { background: #ffeef1 !important; color: #be123c !important; border-color: #fbc4cf !important; }
html:root body.hub label:has(> input[type="radio"][value="Change"]:checked) > span { background: #fff6e5 !important; color: #b45309 !important; border-color: #f8d48a !important; }

/* Vendor home (white cards, blue accent) */
html:root body.hub .vdash .hub-stat, html:root body.hub .vdash .hub-panel { background: #fff; border: 1px solid #e3e7ef; border-radius: 10px; box-shadow: none; }
html:root body.hub .vdash .hub-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
html:root body.hub .vdash .hub-stats .hub-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html:root body.hub .vdash .hub-grid { gap: 12px; margin-bottom: 12px; }
html:root body.hub .vdash .hub-stat__v { font-size: 26px; }
html:root body.hub .vdash .hub-stat__l { color: #47516a; }
html:root body.hub .vdash .vd-pay { display: flex; align-items: center; gap: 36px; margin-top: 10px; }
html:root body.hub .vdash .vd-pay .hub-big { flex: none; font-size: 21px; white-space: nowrap; }
html:root body.hub .vdash .vd-pay .hub-big small { display: table; margin: 8px 0 0; padding: 2px 7px; border-radius: 4px; font-size: 11px; background: color-mix(in srgb, currentColor 10%, #fff); }
html:root body.hub .vdash .vd-pay .hub-bars { flex: 1; min-width: 0; margin: 0; }
html:root body.hub .vdash .hub-bars i { background: #2f55dc; border-radius: 10px 10px 0 0; }
html:root body.hub .vdash .hub-bars i.is-future { background: #c5d3fb; }
html:root body.hub .vdash .hub-donut { justify-content: space-between; margin-top: 6px; }
html:root body.hub .vdash .hub-legend { max-width: 190px; font-size: 12.5px; }
html:root body.hub .vdash .hub-legend u { justify-self: end; font-size: 11.5px; font-weight: 600; color: #0b1437; }
html:root body.hub .vdash .hub-legend b { font-weight: 400; color: #687186; }
html:root body.hub .vdash .hub-legend i { width: 14px; height: 14px; border-radius: 3px; }
html:root body.hub .vdash .hub-donut__ring { width: 152px; height: 152px; }
html:root body.hub .vdash .hub-donut__ring::after { inset: 22px; }
html:root body.hub .vdash .hub-donut__mid { font-size: 23px; }
@media (max-width: 1100px) { html:root body.hub .vdash .hub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { html:root body.hub .vdash .hub-stats, html:root body.hub .vdash .hub-stats .hub-stats { grid-template-columns: 1fr; } html:root body.hub .vdash .vd-pay, html:root body.hub .vdash .hub-donut { flex-direction: column; align-items: stretch; } html:root body.hub .vdash .hub-donut__ring { align-self: center; } html:root body.hub .vdash .hub-panel { overflow-x: auto; } }

/* ===========================================================================
   Sign-in page v2: three centers (Procurement / Sales / HR), blue wave panel
   =========================================================================== */
.hl2-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.hl2-left { padding: 40px 3vw 24px 4vw; display: flex; flex-direction: column; }
.hl2-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; color: #0b1a47; margin-bottom: 26px; }
.hl2-brand img { height: 40px; }
.hl2-panel { flex: 1; position: relative; overflow: hidden; border-radius: 22px; background: #0037a0 url('/img/login-wave.png') right center / cover no-repeat; padding: 9vh 4vw 40px; color: #fff; box-shadow: 0 18px 40px rgba(11, 26, 71, .18); }
.hl2-panel h1 { margin: 0 0 30px; font-size: 32px; font-weight: 700; letter-spacing: -.01em; }
.hl2-steps { list-style: none; margin: 0; padding: 0; max-width: 420px; display: grid; gap: 14px; }
.hl2-steps li { background: rgba(255, 255, 255, .28); border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; padding: 12px 22px; }
.hl2-steps b { display: block; font-size: 15px; font-weight: 600; }
.hl2-steps small { display: block; font-size: 13.5px; opacity: .92; margin-top: 3px; }
.hl2-foot { padding: 14px 18px 0; font-size: 12px; color: #687186; }
.hl2-right { display: flex; align-items: center; justify-content: center; padding: 40px 6vw; }
.hl2-card { width: 100%; max-width: 440px; }
.hl2-card h2 { margin: 0 0 8px; font-size: 30px; font-weight: 700; color: #0b1a47; }
.hl2-sub { font-size: 15px; color: #47516a; margin: 0 0 48px; }
.hl2-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #eef0f4; padding: 5px; border-radius: 12px; margin-bottom: 28px; }
.hl2-tabs label, .hl2-hr label { position: relative; }
.hl2-tabs input, .hl2-hr input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.hl2-tabs span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 6px; border-radius: 9px; font-size: 15px; font-weight: 600; color: #5d6785; line-height: 1.2; }
.hl2-tabs input:checked + span { background: #fff; color: #0b1a47; box-shadow: 0 1px 3px rgba(11, 26, 71, .12); }
.hl2-tabs input:focus-visible + span, .hl2-hr input:focus-visible + span { outline: 2px solid #2860f8; }
.hl2-hr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: -8px 0 20px; }
.hl2-hr span { display: block; text-align: center; padding: 10px; border: 1px solid #e8ebf3; border-radius: 10px; font-size: 14px; font-weight: 600; color: #5d6785; }
.hl2-hr input:checked + span { border-color: #2860f8; color: #1d4fd8; background: #f2f6ff; }
.hl2-to { font-size: 15px; color: #5d6785; margin: 0 0 16px; } .hl2-to b { color: #0b1a47; }
.hl2-card .hl-f label { font-size: 14px; }
.hl2-card .hl-f input[type=text], .hl2-card .hl-f input[type=password] { height: 50px; border-radius: 10px; border-color: #e8ebf3; background: #f5f7fb; font-size: 15px; }
.hl2-card .hl-btn { height: 56px; border-radius: 10px; font-size: 16px; }
.hl2-card .hl-reg { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e1e5ee; font-size: 15px; }
.hl2-card .hl-links { font-size: 14px; gap: 22px; margin-top: 14px; }
@media (max-width: 960px) { .hl2-page { grid-template-columns: 1fr; } .hl2-panel { padding: 32px 24px; } .hl2-right { padding: 28px 22px; } }
.hl2-page [hidden] { display: none !important; }
/* HR portal picker: grey segmented switch like the center tabs */
.hl2-hr { gap: 4px; background: #eef0f4; padding: 5px; border-radius: 12px; margin: -16px 0 22px; }
.hl2-hr span { border: 0; border-radius: 9px; padding: 11px; font-size: 15px; font-weight: 600; color: #5d6785; }
.hl2-hr input:checked + span { background: #fff; color: #0b1437; border: 0; box-shadow: 0 1px 3px rgba(11, 26, 71, .12); }
.hl2-panel { background-color: #0037a0; }
.hl2-tabs { grid-template-columns: 1.35fr 1fr 1fr; } .hl2-tabs span { white-space: nowrap; min-height: 46px; padding: 6px 10px; }