/* ==========================================================================
   VendorPortal — Immersive UI layer
   Loaded AFTER each template's inline <style>, so it re-skins the existing
   markup without touching any template logic. Remove the <link> to revert.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --im-bg:#f4f5f7;
  --im-surface:#ffffff;
  --im-ink:#111318;
  --im-muted:#6b7280;
  --im-faint:#9aa0aa;
  --im-line:rgba(17,19,24,.06);
  --im-accent:#E8601C;
  --im-accent-2:#F59E0B;
  --im-grad:linear-gradient(90deg,#E8601C 0%,#F59E0B 100%);
  --im-tint:#fff4ec;
  --im-radius:14px;
  --im-radius-sm:10px;
  --im-shadow:0 4px 20px rgba(0,0,0,.05);
  --im-shadow-hover:0 12px 32px rgba(0,0,0,.09);
  --im-ring:0 0 0 4px rgba(232,96,28,.16);
  --im-ease:.2s ease-in-out;
  --im-gap:24px;
  --im-sw-open:264px;
  --im-sw-closed:76px;
  --sw:var(--im-sw-open);
}
body.im-collapsed{--sw:var(--im-sw-closed)}

/* ---------- Typography ---------- */
body.im-app,body.im-lite{
  font-family:'Inter','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:var(--im-bg);color:var(--im-ink);
  -webkit-font-smoothing:antialiased;
}
body.im-app *,body.im-lite *{font-family:inherit}

/* ==========================================================================
   1. FULL-SCREEN SHELL (dashboards with a sidebar)
   ========================================================================== */
html:has(body.im-app){height:100%;overflow:hidden}
body.im-app{height:100vh;width:100vw;overflow:hidden;min-height:0}

/* ---------- Sidebar ---------- */
body.im-app .sidebar{
  width:var(--sw);height:100vh;min-height:0;
  background:#15171c;
  overflow-x:hidden;overflow-y:auto;scrollbar-width:none;
  transition:width var(--im-ease);
  box-shadow:1px 0 0 rgba(255,255,255,.04);
}
body.im-app .sidebar::-webkit-scrollbar{display:none}
body.im-app .sb-brand{height:72px;padding:0 20px;border-bottom:none;flex-shrink:0;white-space:nowrap}
body.im-app .sb-brand img{transition:height var(--im-ease)}
body.im-app .sb-sub{border-left-color:rgba(232,96,28,.7);transition:opacity var(--im-ease)}
body.im-app .sb-nav{padding:4px 0 12px}

body.im-app .nav-sec,body.im-app .nav-section{
  padding:18px 24px 6px;font-size:10px;font-weight:600;letter-spacing:1.2px;
  color:rgba(255,255,255,.32);white-space:nowrap;
  transition:opacity var(--im-ease),margin var(--im-ease);
}
body.im-app .nav-item{
  position:relative;margin:2px 12px;padding:10px 12px;border-left:none;border-radius:var(--im-radius-sm);
  font-size:13.5px;font-weight:500;color:rgba(255,255,255,.6);white-space:nowrap;
  transition:background var(--im-ease),color var(--im-ease),transform var(--im-ease);
}
body.im-app .nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
body.im-app .nav-item:active{transform:scale(.98)}
body.im-app .nav-item.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(232,96,28,.28),rgba(245,158,11,.10));
  box-shadow:inset 0 0 0 1px rgba(232,96,28,.25);
}
body.im-app .nav-item.active::before{
  content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--im-grad);
}
body.im-app .nav-item .ic,body.im-app .nav-item>span:first-child{
  width:22px;font-size:16px;text-align:center;flex-shrink:0;
}
body.im-app .nbadge,body.im-app .nav-item .nb{
  background:var(--im-grad);border-radius:999px;padding:2px 7px;font-weight:700;
  transition:all var(--im-ease);
}
body.im-app .sb-foot{margin-top:auto;padding:16px 18px;border-top:1px solid rgba(255,255,255,.06);white-space:nowrap}
body.im-app .u-av{background:var(--im-grad);box-shadow:0 4px 12px rgba(232,96,28,.35)}

/* ---------- Collapsed sidebar ---------- */
body.im-collapsed .sb-brand{padding:0;justify-content:center}
body.im-collapsed .sb-brand img{height:auto!important;width:52px!important;max-width:52px}
body.im-collapsed .sb-sub{display:none}
body.im-collapsed .nav-sec,body.im-collapsed .nav-section{
  font-size:0;padding:0;height:1px;margin:12px 20px;background:rgba(255,255,255,.08);overflow:hidden;
}
body.im-collapsed .nav-item{font-size:0;justify-content:center;gap:0;padding:11px 0}
body.im-collapsed .nav-item .ic,body.im-collapsed .nav-item>span:first-child{font-size:18px}
body.im-collapsed .nbadge,body.im-collapsed .nav-item .nb,body.im-collapsed #esg-nav-badge{
  position:absolute;top:7px;right:12px;width:9px;height:9px;min-width:0;padding:0;margin:0!important;font-size:0!important;
  box-shadow:0 0 0 2px #15171c;
}
body.im-collapsed .sb-foot{padding:16px 0;display:flex;justify-content:center}
body.im-collapsed .u-pill>div:not(.u-av),body.im-collapsed .u-row>div:not(.u-av),
body.im-collapsed .logout-btn{display:none}

/* Tooltip for collapsed items (label copied into data-im-label by JS) */
body.im-collapsed .nav-item[data-im-label]:hover::after{
  /* fixed (to escape the sidebar's overflow clip); vertical position is the
     flex-centred static position inside the item */
  content:attr(data-im-label);position:fixed;left:calc(var(--im-sw-closed) + 8px);
  background:#15171c;color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;
  box-shadow:var(--im-shadow-hover);pointer-events:none;z-index:400;white-space:nowrap;
  animation:im-fade .15s ease-out;
}

/* ---------- Main column ---------- */
body.im-app .main{
  margin-left:var(--sw);height:100vh;min-height:0;min-width:0;overflow:hidden;
  transition:margin-left var(--im-ease);
}
body.im-app .topbar{
  position:relative;flex-shrink:0;height:72px;padding:0 32px 0 20px;gap:16px;
  border-top:none;border-bottom:1px solid var(--im-line);
  background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
}
body.im-app .tb-title,body.im-app .topbar-title{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-right:auto}
body.im-app .nb-btn{
  width:42px;height:42px;border-radius:12px;border:none;background:var(--im-bg);
  transition:background var(--im-ease),transform var(--im-ease),box-shadow var(--im-ease);
}
body.im-app .nb-btn:hover{background:var(--im-tint);transform:translateY(-1px);box-shadow:var(--im-shadow)}

.im-toggle{
  width:42px;height:42px;flex-shrink:0;border:none;border-radius:12px;background:transparent;color:var(--im-ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--im-ease),transform var(--im-ease);
}
.im-toggle:hover{background:var(--im-bg)}
.im-toggle:active{transform:scale(.94)}
.im-toggle:focus-visible{outline:none;box-shadow:var(--im-ring)}
.im-toggle svg{width:20px;height:20px;transition:transform var(--im-ease)}
body.im-collapsed .im-toggle svg{transform:scaleX(-1)}

/* The workspace is the only thing that scrolls */
body.im-app .content{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:var(--im-gap) 32px 40px;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent;
}
body.im-app .content::-webkit-scrollbar{width:10px}
body.im-app .content::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:10px;border:3px solid var(--im-bg)}

/* Panels become a grid matrix with comfortable spacing */
body.im-app .ps.active{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--im-gap);align-content:start;
  animation:im-rise .28s ease-out;
}
body.im-app .ps.active>*{min-width:0;margin-bottom:0}
body.im-app .ps.active>.card + .card{margin-top:0}

/* ==========================================================================
   2. CARDS
   ========================================================================== */
body.im-app .card,body.im-lite .card,
body.im-app .modal-card,body.im-lite .section-card{
  background:var(--im-surface);border:none;border-radius:var(--im-radius);
  box-shadow:var(--im-shadow);
  transition:box-shadow var(--im-ease),transform var(--im-ease);
}
body.im-app .card:hover,body.im-lite .card:hover,body.im-lite .section-card:hover{box-shadow:var(--im-shadow-hover)}

/* Card headers: whitespace instead of rules */
body.im-app .ch,body.im-lite .card-hdr,body.im-lite .sc-hdr{
  background:transparent;border-bottom:none;padding:20px 24px 8px;
}
body.im-app .ct{font-size:15px;font-weight:700;letter-spacing:-.2px}
body.im-app .card-header,body.im-lite .card-header{border-radius:var(--im-radius) var(--im-radius) 0 0}
body.im-app .card-body,body.im-lite .card-body{padding:20px 24px 24px}

/* KPI / stat tiles */
body.im-app .sg,body.im-app .stat-grid{gap:20px;margin-bottom:0}
body.im-app .sc,body.im-app .stat-card,body.im-lite .kpi{
  --im-k:var(--im-accent);
  position:relative;overflow:hidden;
  background:var(--im-surface);border:none;border-radius:var(--im-radius);padding:20px;
  box-shadow:var(--im-shadow);
  transition:transform var(--im-ease),box-shadow var(--im-ease);
}
body.im-app .sc.green,body.im-app .stat-card.g{--im-k:#1e8a4a}
body.im-app .sc.red,body.im-app .stat-card.r{--im-k:#CC1414}
body.im-app .sc.blue,body.im-app .stat-card.b{--im-k:#2563eb}
body.im-app .sc.o2{--im-k:#F59E0B}
body.im-app .sc::after,body.im-app .stat-card::after{
  content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;
  background:var(--im-k);opacity:.07;transition:transform .35s ease-out,opacity var(--im-ease);
}
body.im-app .sc:hover,body.im-app .stat-card:hover,body.im-lite .kpi:hover{transform:translateY(-3px);box-shadow:var(--im-shadow-hover)}
body.im-app .sc:hover::after,body.im-app .stat-card:hover::after{transform:scale(1.25);opacity:.11}
body.im-app .si{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--im-k) 10%,#fff);font-size:18px;margin-bottom:14px;
}
body.im-app .sv,body.im-app .stat-val{font-size:30px;font-weight:800;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
body.im-app .sl,body.im-app .stat-lbl{font-size:12px;font-weight:500;color:var(--im-muted);margin-top:4px}

/* ==========================================================================
   3. TABLES, BADGES, BUTTONS, FORMS
   ========================================================================== */
body.im-app thead th,body.im-lite thead th{
  background:transparent;border-bottom:1px solid var(--im-line);
  padding:12px 16px;font-size:11px;font-weight:600;letter-spacing:.6px;color:var(--im-faint);
}
body.im-app tbody td,body.im-lite tbody td{padding:14px 16px;border-bottom:1px solid var(--im-line)}
body.im-app tbody tr,body.im-lite tbody tr{transition:background var(--im-ease)}
body.im-app tbody tr:hover,body.im-lite tbody tr:hover{background:#fafafb}
body.im-app .badge{padding:4px 10px;border-radius:999px;font-weight:600;letter-spacing:.1px}

body.im-app .btn,body.im-lite .btn{
  border-radius:var(--im-radius-sm);padding:9px 16px;font-weight:600;
  transition:transform var(--im-ease),box-shadow var(--im-ease),background var(--im-ease),filter var(--im-ease);
}
body.im-app .btn.bsm{padding:6px 12px;border-radius:9px}
body.im-app .btn:hover:not(:disabled),body.im-lite .btn:hover:not(:disabled){transform:translateY(-1px)}
body.im-app .btn:active:not(:disabled),body.im-lite .btn:active:not(:disabled){transform:translateY(0) scale(.98)}
body.im-app .btn:focus-visible,body.im-lite .btn:focus-visible{outline:none;box-shadow:var(--im-ring)}
body.im-app .btn.bo,body.im-lite .btn.bo{background:var(--im-grad);box-shadow:0 4px 14px rgba(232,96,28,.25)}
body.im-app .btn.bo:hover:not(:disabled),body.im-lite .btn.bo:hover:not(:disabled){filter:brightness(1.05);box-shadow:0 8px 20px rgba(232,96,28,.32)}

body.im-app .fg input,body.im-app .fg select,body.im-app .fg textarea,
body.im-lite .fg input,body.im-lite .fg select,body.im-lite .fg textarea{
  border:1.5px solid #e6e8ec;border-radius:var(--im-radius-sm);padding:10px 13px;background:#fbfbfc;
  transition:border-color var(--im-ease),box-shadow var(--im-ease),background var(--im-ease);
}
body.im-app .fg input:hover,body.im-app .fg select:hover,body.im-app .fg textarea:hover{border-color:#d5d8de}
body.im-app .fg input:focus,body.im-app .fg select:focus,body.im-app .fg textarea:focus,
body.im-lite .fg input:focus,body.im-lite .fg select:focus,body.im-lite .fg textarea:focus{
  border-color:var(--im-accent);background:#fff;box-shadow:var(--im-ring);
}
body.im-app .fg label{font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--im-muted);margin-bottom:6px}
body.im-app .fg{margin-bottom:16px}
body.im-app .fr,body.im-app .fr3,body.im-app .fgrid{gap:16px}
body.im-app .al{border-radius:var(--im-radius-sm);border:none}

/* Modals */
body.im-app .mbg,body.im-app .modal-backdrop{background:rgba(17,19,24,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.im-app .mbg.open .modal,body.im-app .modal-backdrop.open .modal{animation:im-pop .22s cubic-bezier(.2,.9,.3,1.2)}
body.im-app .modal{border-radius:18px;border-top:none;box-shadow:0 24px 64px rgba(0,0,0,.22)}
body.im-app .mc{transition:color var(--im-ease),transform var(--im-ease)}
body.im-app .mc:hover{transform:rotate(90deg)}

/* Notifications popover */
body.im-app .np{top:76px;right:24px;border-top:none;border:none;border-radius:var(--im-radius);box-shadow:0 18px 48px rgba(0,0,0,.16)}
body.im-app .np.open{animation:im-pop .2s ease-out}

/* ==========================================================================
   4. RANGE SLIDERS  (built by immersive.js from bounded numeric inputs)
   ========================================================================== */
.im-slider{display:flex;align-items:center;gap:14px;width:100%;min-width:180px;padding:6px 0}
.im-slider-track{position:relative;flex:1;height:28px;display:flex;align-items:center}
.im-range{
  --im-pct:0%;
  -webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;
  touch-action:pan-y;
}
.im-range:focus{outline:none}
/* Track: thin neutral line, gradient-filled up to the thumb */
.im-range::-webkit-slider-runnable-track{
  height:4px;border-radius:4px;
  background:linear-gradient(90deg,#E8601C 0%,#F59E0B var(--im-pct),#e5e7eb var(--im-pct),#e5e7eb 100%);
}
.im-range::-moz-range-track{height:4px;border-radius:4px;background:#e5e7eb}
.im-range::-moz-range-progress{height:4px;border-radius:4px;background:var(--im-grad)}
/* Thumb: 24px tactile circle */
.im-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;
  background:#fff;border:2px solid var(--im-accent);
  box-shadow:0 2px 8px rgba(232,96,28,.30);
  transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;
}
.im-range::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;box-sizing:border-box;
  background:#fff;border:2px solid var(--im-accent);box-shadow:0 2px 8px rgba(232,96,28,.30);
  transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;
}
.im-range:hover::-webkit-slider-thumb{transform:scale(1.08);box-shadow:0 0 0 6px rgba(232,96,28,.10),0 2px 8px rgba(232,96,28,.30)}
.im-range:hover::-moz-range-thumb{transform:scale(1.08);box-shadow:0 0 0 6px rgba(232,96,28,.10),0 2px 8px rgba(232,96,28,.30)}
.im-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(232,96,28,.18)}
.im-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 7px rgba(232,96,28,.18)}
.im-range:active::-webkit-slider-thumb{transform:scale(1.18);box-shadow:0 0 0 9px rgba(232,96,28,.14)}
.im-range:active::-moz-range-thumb{transform:scale(1.18);box-shadow:0 0 0 9px rgba(232,96,28,.14)}
.im-range:disabled{cursor:not-allowed;opacity:.5}

/* Floating value bubble above the thumb while dragging */
.im-bubble{
  position:absolute;bottom:calc(100% + 4px);left:var(--im-pos,0);transform:translateX(-50%) translateY(4px) scale(.9);
  background:#15171c;color:#fff;font-size:11.5px;font-weight:700;padding:4px 8px;border-radius:7px;white-space:nowrap;
  opacity:0;pointer-events:none;font-variant-numeric:tabular-nums;
  transition:opacity .15s ease-in-out,transform .15s ease-in-out;
}
.im-bubble::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#15171c}
.im-slider.is-dragging .im-bubble,.im-slider:focus-within .im-bubble{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

/* Value badge — the original number input, restyled; still editable for exact entry */
.im-badge{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;
  background:var(--im-tint);border-radius:999px;padding:0 12px 0 4px;height:34px;
  transition:box-shadow var(--im-ease),background var(--im-ease)}
.im-badge:focus-within{box-shadow:var(--im-ring);background:#fff}
.im-badge input[type=number].im-src,
body.im-app .fg .im-badge input[type=number].im-src{
  width:var(--im-w,5ch)!important;min-width:0;height:34px;padding:0 4px!important;margin:0;
  border:none!important;background:transparent!important;box-shadow:none!important;outline:none;
  font-size:14px!important;font-weight:700;color:var(--im-accent)!important;text-align:right!important;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.im-badge input.im-src::-webkit-outer-spin-button,.im-badge input.im-src::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.im-badge .im-unit{font-size:12px;font-weight:600;color:var(--im-accent);opacity:.75}
.im-slider.is-empty .im-badge{background:#f1f2f4}
.im-slider.is-empty .im-badge .im-unit{color:var(--im-faint)}
.im-badge.im-bump{animation:im-bump .25s ease-out}

/* Neutralise page-level `.fg input` / `.crit-row input` rules on the range itself */
html body .im-slider input.im-range,html body .im-slider input.im-range:focus,html body .im-slider input.im-range:hover{
  width:100%!important;height:28px!important;padding:0!important;margin:0!important;border:none!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;outline:none!important;
}

/* Requester page: soften the dark card headers into the light card language */
body.im-app .card-header{background:transparent;padding:20px 24px 4px}
body.im-app .card-header h3{color:var(--im-ink);font-size:15px;letter-spacing:-.2px}
body.im-app .card-header p{color:var(--im-muted)}
body.im-app .card-icon{border-radius:12px;background:var(--im-tint)}

/* Slots that held a narrow number box need room for a slider */
body.im-app .crit-row{grid-template-columns:minmax(0,1.2fr) minmax(220px,1fr) minmax(0,1.4fr) 40px;gap:12px}
body.im-app .crit-row .im-slider{min-width:0}
#vat-row .im-slider{width:260px;min-width:200px}
body.im-lite .filters .im-slider,body.im-lite .filter-bar .im-slider{width:240px;min-width:200px;padding:0}

/* Values that recalculate from a slider flash softly */
.im-flash{animation:im-flash .45s ease-out}

/* ==========================================================================
   5. MOTION
   ========================================================================== */
@keyframes im-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes im-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes im-fade{from{opacity:0}to{opacity:1}}
@keyframes im-bump{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes im-flash{0%{background:rgba(245,158,11,.22)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){
  body.im-app *,body.im-lite *,.im-range::-webkit-slider-thumb{animation:none!important;transition:none!important}
}

/* ==========================================================================
   6. SMALL SCREENS — sidebar becomes an off-canvas drawer
   ========================================================================== */
.im-scrim{display:none}
@media (max-width:860px){
  body.im-app{--sw:var(--im-sw-open)}
  body.im-app .sidebar{position:fixed;width:var(--im-sw-open);height:100vh;min-height:0;transform:translateX(-100%);transition:transform .25s ease-in-out;z-index:300}
  body.im-app.im-drawer .sidebar{transform:none;box-shadow:24px 0 48px rgba(0,0,0,.25)}
  body.im-app .main{margin-left:0}
  body.im-app .topbar{padding:0 16px 0 10px;height:64px}
  body.im-app .tb-title,body.im-app .topbar-title{font-size:17px}
  body.im-app .content{padding:16px 16px 32px}
  body.im-app .ps.active{gap:16px}
  body.im-collapsed .im-toggle svg{transform:none}
  .im-scrim{display:block;position:fixed;inset:0;background:rgba(17,19,24,.4);opacity:0;pointer-events:none;transition:opacity .25s ease-in-out;z-index:250}
  body.im-drawer .im-scrim{opacity:1;pointer-events:auto}
  /* Undo collapsed-mode compaction inside the drawer */
  body.im-collapsed .nav-item{font-size:13.5px;justify-content:flex-start;gap:10px;padding:10px 12px}
  body.im-collapsed .nav-sec,body.im-collapsed .nav-section{font-size:10px;padding:18px 24px 6px;height:auto;margin:0;background:none}
  body.im-collapsed .sb-sub{display:block}
  body.im-collapsed .sb-brand{padding:0 20px;justify-content:flex-start}
  body.im-collapsed .u-pill>div:not(.u-av),body.im-collapsed .u-row>div:not(.u-av){display:block}
  body.im-collapsed .logout-btn{display:inline}
  body.im-collapsed .nbadge,body.im-collapsed .nav-item .nb,body.im-collapsed #esg-nav-badge{position:static;width:auto;height:auto;padding:2px 7px;font-size:10px!important}
  body.im-collapsed .nav-item[data-im-label]:hover::after{display:none}
}

@media print{
  html:has(body.im-app),body.im-app,body.im-app .main,body.im-app .content{height:auto;overflow:visible}
  .im-toggle,.im-scrim{display:none!important}
  body.im-app .main{margin-left:0}
}

/* Report pages (no sidebar): lift the filter bar into a card */
body.im-lite .filter-bar{border:none;border-radius:var(--im-radius);box-shadow:var(--im-shadow);padding:16px 20px;transition:box-shadow var(--im-ease)}
body.im-lite .filter-bar:hover{box-shadow:var(--im-shadow-hover)}
body.im-lite .card{border-radius:var(--im-radius);overflow:hidden}

/* ==========================================================================
   7. AUTH PAGE (login / registration) — full-screen split layout
   ========================================================================== */
html:has(body.im-auth){height:100%;overflow:hidden}
body.im-auth{
  height:100vh;width:100vw;overflow:hidden;min-height:0;
  display:grid;grid-template-columns:minmax(340px,38%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
}
body.im-auth .header{
  grid-column:1;grid-row:1 / 3;height:auto;padding:40px 48px;border-bottom:none;
  flex-direction:column;align-items:flex-start;justify-content:space-between;gap:32px;
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 70% at 0% 100%,rgba(232,96,28,.38) 0%,transparent 60%),
    radial-gradient(80% 50% at 100% 0%,rgba(245,158,11,.20) 0%,transparent 60%),
    #15171c;
}
body.im-auth .header::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(180deg,#000 0%,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
}
body.im-auth .logo-divider{opacity:.8;background:var(--im-accent)}
body.im-auth .header-right{order:3;font-size:12px;color:rgba(255,255,255,.35)}
.im-hero{max-width:440px;animation:im-rise .5s ease-out}
.im-hero h1{font-size:clamp(28px,3vw,40px);line-height:1.12;font-weight:800;letter-spacing:-1.2px;color:#fff}
.im-hero h1 span{background:var(--im-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.im-hero p{margin-top:14px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.6)}
.im-hero ul{list-style:none;margin-top:28px;display:grid;gap:12px}
.im-hero li{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.82);
  padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:background var(--im-ease),transform var(--im-ease)}
.im-hero li:hover{background:rgba(255,255,255,.07);transform:translateX(3px)}
.im-hero li i{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-style:normal;
  background:rgba(232,96,28,.18);color:#fdba74}
.im-hero li svg{width:16px;height:16px}

body.im-auth .main{
  grid-column:2;grid-row:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:48px clamp(20px,5vw,72px) 40px;align-items:flex-start;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent;
}
body.im-auth .container{max-width:860px}
body.im-auth .footer{grid-column:2;grid-row:2;background:transparent;border-top:1px solid var(--im-line);color:var(--im-faint);padding:12px 24px}

/* Segmented tabs */
body.im-auth .tab-bar{background:#e9eaee;border-radius:14px;padding:4px;margin-bottom:28px;max-width:100%;overflow-x:auto}
body.im-auth .tab{border-radius:11px;color:var(--im-muted);font-weight:600;padding:10px 20px;white-space:nowrap;transition:all var(--im-ease)}
body.im-auth .tab:hover:not(.active){color:var(--im-ink);background:rgba(255,255,255,.55)}
body.im-auth .tab.active{background:#fff;color:var(--im-ink);box-shadow:0 2px 10px rgba(0,0,0,.08)}
body.im-auth .panel.active{animation:im-rise .28s ease-out}

/* Cards */
body.im-auth .card,body.im-auth .session-card{border:none;border-radius:var(--im-radius);box-shadow:var(--im-shadow);transition:box-shadow var(--im-ease)}
body.im-auth .card:hover{box-shadow:var(--im-shadow-hover)}
body.im-auth .card-header{background:transparent;border-bottom:none;padding:28px 32px 4px}
body.im-auth .card-title{color:var(--im-ink);font-size:22px;font-weight:800;letter-spacing:-.5px}
body.im-auth .card-sub{color:var(--im-muted);font-size:14px;margin-top:6px}
body.im-auth .card-body{padding:24px 32px 32px}
body.im-auth .section-heading{border-bottom:none;padding-bottom:0;margin-bottom:14px;color:var(--im-accent);letter-spacing:1.2px}
body.im-auth .form-section{margin-bottom:32px}
body.im-auth .form-grid,body.im-auth .form-grid-3{gap:16px 18px}

/* Fields */
body.im-auth .form-group input,body.im-auth .form-group select,body.im-auth .form-group textarea,body.im-auth .doc-type-row select{
  border:1.5px solid #e6e8ec;border-radius:var(--im-radius-sm);padding:11px 14px;background:#fbfbfc;
  transition:border-color var(--im-ease),box-shadow var(--im-ease),background var(--im-ease);
}
body.im-auth .form-group input:hover,body.im-auth .form-group select:hover,body.im-auth .form-group textarea:hover{border-color:#d5d8de}
body.im-auth .form-group input:focus,body.im-auth .form-group select:focus,body.im-auth .form-group textarea:focus,body.im-auth .otp-input:focus{
  border-color:var(--im-accent);background:#fff;box-shadow:var(--im-ring);
}
body.im-auth .otp-input{border-radius:14px;border:1.5px solid #e6e8ec;background:#fbfbfc;padding:16px}
body.im-auth .form-group label{color:var(--im-muted);margin-bottom:6px;letter-spacing:.5px}

/* Buttons */
body.im-auth .btn{border-radius:12px;padding:13px;transition:transform var(--im-ease),box-shadow var(--im-ease),filter var(--im-ease),background var(--im-ease)}
body.im-auth .btn:hover:not(:disabled){transform:translateY(-1px)}
body.im-auth .btn:active:not(:disabled){transform:scale(.98)}
body.im-auth .btn:focus-visible{outline:none;box-shadow:var(--im-ring)}
body.im-auth .btn-orange{background:var(--im-grad);box-shadow:0 6px 18px rgba(232,96,28,.28)}
body.im-auth .btn-orange:hover:not(:disabled){background:var(--im-grad);filter:brightness(1.05);box-shadow:0 10px 24px rgba(232,96,28,.34)}
body.im-auth .btn-microsoft{box-shadow:0 6px 18px rgba(0,120,212,.22);text-decoration:none}
body.im-auth .or-divider{display:flex;align-items:center;gap:12px;margin:18px 0}
body.im-auth .or-divider::before,body.im-auth .or-divider::after{position:static;flex:1;width:auto;background:var(--im-line)}
body.im-auth .btn-outline{border-color:#e6e8ec}

/* Alerts, uploads, progress */
body.im-auth .alert,body.im-auth .notice,body.im-auth .rejection-box{border-radius:var(--im-radius-sm);border:none;border-left:4px solid}
body.im-auth .upload-zone{border-radius:var(--im-radius);border-color:#dfe1e6;background:#fbfbfc;transition:all var(--im-ease)}
body.im-auth .upload-zone:hover,body.im-auth .upload-zone.over{border-color:var(--im-accent);background:var(--im-tint);transform:translateY(-1px)}
body.im-auth .uploaded-file{border:none;border-radius:var(--im-radius-sm);background:#f4f5f7}
body.im-auth .reg-step-circle{transition:all .3s ease-in-out}
body.im-auth .reg-step.active .reg-step-circle{background:var(--im-grad);box-shadow:0 0 0 5px rgba(232,96,28,.15)}
body.im-auth .step-dot{transition:all .3s ease-in-out}
body.im-auth .step-dot.active{width:22px;border-radius:4px;background:var(--im-grad)}
body.im-auth .session-overlay{background:rgba(17,19,24,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.im-auth .session-overlay.show .session-card{animation:im-pop .22s ease-out;border-top:none}

@media (max-width:960px){
  body.im-auth{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  body.im-auth .header{grid-column:1;grid-row:1;flex-direction:row;align-items:center;padding:14px 16px;gap:12px}
  body.im-auth .header img{height:30px!important}
  body.im-auth .im-hero,body.im-auth .header-right{display:none}
  body.im-auth .main{grid-column:1;grid-row:2;padding:20px 16px 28px}
  body.im-auth .footer{grid-column:1;grid-row:3;padding:10px 16px}
  body.im-auth .card-header{padding:22px 20px 4px}
  body.im-auth .card-body{padding:18px 20px 24px}
  body.im-auth .card{max-width:none!important}
}

/* ==========================================================================
   8. WORKSPACE PAGE (RFQ create) — fixed header + footer, scrolling middle
   ========================================================================== */
html:has(body.im-page){height:100%;overflow:hidden}
body.im-page{height:100vh;width:100vw;overflow:hidden;display:flex;flex-direction:column}
body.im-page .topbar{
  position:relative;flex-shrink:0;height:72px;padding:0 32px;border-bottom:none;
  background:#15171c;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}
body.im-page .tb-title{font-size:17px;font-weight:700;letter-spacing:-.2px}
body.im-page .tb-back{border:none;background:rgba(255,255,255,.07);border-radius:10px;padding:8px 14px;transition:background var(--im-ease),transform var(--im-ease)}
body.im-page .tb-back:hover{background:rgba(255,255,255,.13);transform:translateX(-2px)}
body.im-page .page{
  flex:1;min-height:0;width:100%;max-width:none;margin:0;overflow-y:auto;overflow-x:hidden;
  padding:32px max(32px,calc((100% - 1240px) / 2)) 40px;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent;
}
body.im-page .page-header{margin-bottom:28px;animation:im-rise .3s ease-out}
body.im-page .page-header h1{font-size:28px;font-weight:800;letter-spacing:-.8px}
body.im-page .page-header p{font-size:14px;color:var(--im-muted)}
body.im-page .pr-banner{border-left:none;border-radius:var(--im-radius);padding:20px 24px;box-shadow:var(--im-shadow);
  background:radial-gradient(90% 140% at 0% 0%,rgba(232,96,28,.35),transparent 60%),#15171c}
body.im-page .grid{gap:var(--im-gap);grid-template-columns:minmax(0,1fr) 380px}
body.im-page .grid>div{display:grid;gap:var(--im-gap);align-content:start;min-width:0}
body.im-page .card{margin-bottom:0;border:none;border-radius:var(--im-radius);box-shadow:var(--im-shadow);transition:box-shadow var(--im-ease),transform var(--im-ease)}
body.im-page .card:hover{box-shadow:var(--im-shadow-hover)}
body.im-page .card-header{background:transparent;border-bottom:none;padding:22px 24px 6px;gap:14px}
body.im-page .card-header h3{font-size:15.5px;letter-spacing:-.2px}
body.im-page .card-header p{font-size:12.5px;color:var(--im-muted)}
body.im-page .card-header .step{width:32px;height:32px;border-radius:10px;background:var(--im-grad);box-shadow:0 4px 12px rgba(232,96,28,.3)}
body.im-page .card-body{padding:16px 24px 24px}
body.im-page .fg{margin-bottom:18px}
body.im-page .fr{gap:18px}
body.im-page .fg input,body.im-page .fg select,body.im-page .fg textarea,
body.im-page .ven-filter-bar input,body.im-page .ven-filter-bar select,body.im-page #rfq-doc-type{
  border:1.5px solid #e6e8ec!important;border-radius:var(--im-radius-sm)!important;padding:10px 13px;background:#fbfbfc;
  transition:border-color var(--im-ease),box-shadow var(--im-ease),background var(--im-ease);
}
body.im-page .fg input:focus,body.im-page .fg select:focus,body.im-page .fg textarea:focus,
body.im-page .ven-filter-bar input:focus,body.im-page .ven-filter-bar select:focus{border-color:var(--im-accent)!important;background:#fff;box-shadow:var(--im-ring)}
body.im-page .rte-toolbar{background:#f6f7f9;border-color:#e6e8ec;border-radius:var(--im-radius-sm) var(--im-radius-sm) 0 0}
body.im-page .rte-area{border-color:#e6e8ec;border-radius:0 0 var(--im-radius-sm) var(--im-radius-sm);transition:border-color var(--im-ease),box-shadow var(--im-ease)}
body.im-page .rte-area:focus{box-shadow:var(--im-ring)}
body.im-page .rte-btn{border:none;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06);border-radius:7px;transition:all var(--im-ease)}
body.im-page .ven-list{border:none;border-radius:var(--im-radius-sm);background:#fbfbfc;box-shadow:inset 0 0 0 1.5px #eef0f3}
body.im-page .ven-item{border-bottom-color:var(--im-line);transition:background var(--im-ease)}
body.im-page .li-table th{background:transparent;border-bottom:1px solid var(--im-line);color:var(--im-faint)}
body.im-page .li-table td{border-bottom-color:var(--im-line)}
body.im-page .upload-zone{border-radius:var(--im-radius);border-color:#dfe1e6;background:#fbfbfc}
body.im-page .upload-zone:hover,body.im-page .upload-zone.over{border-color:var(--im-accent);background:var(--im-tint)}
body.im-page .att-file{border:none;background:#f4f5f7;border-radius:var(--im-radius-sm)}
body.im-page .alert,body.im-page .al{border-radius:var(--im-radius-sm);border:none;border-left:4px solid}
body.im-page .submit-bar{
  position:relative;flex-shrink:0;border-top:none;padding:14px max(32px,calc((100% - 1240px) / 2));
  background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
  box-shadow:0 -6px 24px rgba(0,0,0,.06);
}
body.im-page .btn{border-radius:var(--im-radius-sm);padding:10px 20px;transition:transform var(--im-ease),box-shadow var(--im-ease),filter var(--im-ease),background var(--im-ease)}
body.im-page .btn:hover:not(:disabled){transform:translateY(-1px)}
body.im-page .btn:active:not(:disabled){transform:scale(.98)}
body.im-page .btn:focus-visible{outline:none;box-shadow:var(--im-ring)}
body.im-page .btn-orange{background:var(--im-grad);box-shadow:0 6px 18px rgba(232,96,28,.28)}
body.im-page .btn-orange:hover:not(:disabled){background:var(--im-grad);filter:brightness(1.05)}
body.im-page #m-preview{background:rgba(17,19,24,.45)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.im-page #m-preview>div{border-top:none!important;border-radius:18px!important;box-shadow:0 24px 64px rgba(0,0,0,.22);animation:im-pop .22s ease-out}
@media (max-width:900px){
  body.im-page .topbar{height:60px;padding:0 16px;gap:10px}
  body.im-page .topbar>span,body.im-page .tb-user,body.im-page .tb-logo strong{display:none}
  body.im-page .page{padding:20px 16px 28px}
  body.im-page .grid{grid-template-columns:minmax(0,1fr)!important}
  body.im-page .submit-bar{padding:10px 16px;flex-wrap:wrap}
  body.im-page .submit-bar .bar-info{flex-basis:100%}
  body.im-page .submit-bar .btn{flex:1;padding:10px 8px}
}

/* Deadline helper slider */
.im-deadline{margin-top:10px}
.im-deadline .im-badge{padding:0 12px;font-size:13px;font-weight:700;color:var(--im-accent);white-space:nowrap}
.im-deadline-out{font-size:12px;color:var(--im-muted);margin-top:2px;transition:color var(--im-ease)}
.im-deadline-out strong{color:var(--im-ink);font-weight:600}

@media print{
  html:has(body.im-auth),html:has(body.im-page),body.im-auth,body.im-page,body.im-page .page,body.im-auth .main{height:auto;overflow:visible;display:block}
}

/* ==========================================================================
   9. ESG PAGES (KYC questionnaire + ESG report) — workspace mode extras
   ========================================================================== */
/* Narrow reading column for the questionnaire */
body.im-page.im-narrow .page{padding:32px max(24px,calc((100% - 900px) / 2)) 48px}
body.im-page .topbar>a{
  margin-left:auto;border:none;background:rgba(255,255,255,.07);border-radius:10px;padding:8px 14px;
  transition:background var(--im-ease),transform var(--im-ease);
}
body.im-page .topbar>a:hover{background:rgba(255,255,255,.13);transform:translateX(-2px)}
body.im-page .topbar .ttl{font-size:17px;font-weight:700;letter-spacing:-.2px}

/* KYC progress card */
body.im-page .progress-bar{border:none;border-radius:var(--im-radius);box-shadow:var(--im-shadow);padding:20px 24px;margin-bottom:var(--im-gap);transition:box-shadow var(--im-ease)}
body.im-page .progress-bar:hover{box-shadow:var(--im-shadow-hover)}
body.im-page .ps-circle{border-width:2px;transition:all .25s ease-in-out}
body.im-page .ps-item:hover .ps-circle{transform:scale(1.08)}
body.im-page .ps-item.active .ps-circle{background:var(--im-grad);border-color:transparent;box-shadow:0 0 0 5px rgba(232,96,28,.16)}
body.im-page .ps-line{height:3px;border-radius:3px;background:#eceef1;transition:background .3s ease-in-out}
body.im-page .status-banner{border-left-width:4px;border-radius:var(--im-radius);box-shadow:var(--im-shadow)}

/* Questionnaire sections */
body.im-page .section-card{border:none;border-radius:var(--im-radius);box-shadow:var(--im-shadow);margin-bottom:var(--im-gap);overflow:hidden;
  transition:box-shadow var(--im-ease);animation:im-rise .28s ease-out}
body.im-page .section-card:hover{box-shadow:var(--im-shadow-hover)}
body.im-page .sc-hdr{background:transparent;border-bottom:none;padding:24px 28px 4px}
body.im-page .sc-hdr h3{font-size:17px;font-weight:800;letter-spacing:-.3px}
body.im-page .sc-hdr p{font-size:13px;color:var(--im-muted)}
body.im-page .sc-body{padding:18px 28px 28px}
body.im-page .q-group{margin-bottom:24px}
body.im-page .q-label .qn{background:var(--im-tint);color:var(--im-accent);border-radius:999px;padding:2px 8px}
body.im-page .q-input,body.im-page .q-select,body.im-page .q-textarea{
  border:1.5px solid #e6e8ec;border-radius:var(--im-radius-sm);padding:11px 14px;background:#fbfbfc;
  transition:border-color var(--im-ease),box-shadow var(--im-ease),background var(--im-ease);
}
body.im-page .q-input:hover,body.im-page .q-select:hover,body.im-page .q-textarea:hover{border-color:#d5d8de}
body.im-page .q-input:focus,body.im-page .q-select:focus,body.im-page .q-textarea:focus{border-color:var(--im-accent);background:#fff;box-shadow:var(--im-ring)}
body.im-page .q-options{gap:10px}
body.im-page .q-opt{border:none;border-radius:var(--im-radius-sm);padding:12px 14px;background:#f6f7f9;box-shadow:inset 0 0 0 1.5px transparent;
  transition:background var(--im-ease),box-shadow var(--im-ease),transform var(--im-ease)}
body.im-page .q-opt:hover{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(232,96,28,.45);transform:translateY(-1px)}
body.im-page .q-opt.selected{background:var(--im-tint);box-shadow:inset 0 0 0 1.5px var(--im-accent)}
body.im-page .q-opt input{width:16px;height:16px}
body.im-page .ud-item{background:#f1f2f4;padding:6px 12px}
body.im-page .nav-btns{margin-top:8px}
body.im-page .btn-green{background:linear-gradient(90deg,#1e8a4a,#22a55a);box-shadow:0 6px 18px rgba(30,138,74,.25);color:#fff}
body.im-page .btn-outline{border-color:#e6e8ec}

/* ESG report */
body.im-page.im-report .page{padding-top:28px}
body.im-page .header h1{font-size:26px;letter-spacing:-.7px}
body.im-page .back-btn{border-radius:var(--im-radius-sm);background:var(--im-grad);box-shadow:0 4px 14px rgba(232,96,28,.25);transition:transform var(--im-ease),filter var(--im-ease)}
body.im-page .back-btn:hover{transform:translateX(-2px);filter:brightness(1.05)}
body.im-page .kpi-bar{gap:20px;margin-bottom:var(--im-gap)}
body.im-page .kpi{border-radius:var(--im-radius);box-shadow:var(--im-shadow);padding:20px;text-align:left;border-bottom:none!important;position:relative;overflow:hidden;
  transition:transform var(--im-ease),box-shadow var(--im-ease)}
body.im-page .kpi:hover{transform:translateY(-3px);box-shadow:var(--im-shadow-hover)}
body.im-page .kpi .num{font-size:30px;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
body.im-page .kpi .lbl{font-weight:500;color:var(--im-muted)}
body.im-page .filters{border-radius:var(--im-radius);box-shadow:var(--im-shadow);padding:16px 20px;gap:12px;margin-bottom:var(--im-gap);transition:box-shadow var(--im-ease)}
body.im-page .filters:hover{box-shadow:var(--im-shadow-hover)}
body.im-page .fi{border:1.5px solid #e6e8ec;border-radius:var(--im-radius-sm);padding:9px 12px;background:#fbfbfc;transition:border-color var(--im-ease),box-shadow var(--im-ease)}
body.im-page .fi:focus{border-color:var(--im-accent);background:#fff;box-shadow:var(--im-ring)}
body.im-page.im-report table{border-radius:var(--im-radius);box-shadow:var(--im-shadow);overflow:visible;border-collapse:separate;border-spacing:0}
body.im-page.im-report th{position:sticky;top:0;z-index:2;background:#fff;color:var(--im-faint);font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  padding:14px 16px;border-bottom:1px solid var(--im-line)}
body.im-page.im-report th:first-child{border-top-left-radius:var(--im-radius)}
body.im-page.im-report th:last-child{border-top-right-radius:var(--im-radius)}
body.im-page.im-report td{padding:14px 16px;border-bottom:1px solid var(--im-line);transition:background var(--im-ease)}
body.im-page.im-report tr:last-child td{border-bottom:none}
body.im-page.im-report tbody tr:hover td{background:#fafafb}
body.im-page .badge{border-radius:999px;padding:4px 10px;font-weight:600}
.im-score-filter{display:flex;align-items:center;gap:10px;min-width:280px;flex:1.4}
.im-score-filter>span{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--im-muted);white-space:nowrap}
.im-score-filter .im-slider{padding:0;min-width:0}
.im-score-filter .im-badge{padding:0 12px;font-size:13px;font-weight:700;color:var(--im-accent);white-space:nowrap}
.im-score-filter .im-slider.is-empty .im-badge{color:var(--im-faint)}
@media (max-width:900px){
  body.im-page.im-narrow .page{padding:16px 12px 32px}
  body.im-page .sc-hdr{padding:20px 18px 4px}
  body.im-page .sc-body{padding:14px 18px 22px}
  body.im-page .topbar>span:not(.ttl){display:none}
  body.im-page.im-report .page{padding:16px 12px 28px}
  body.im-page.im-report table{display:block;overflow-x:auto}
  .im-score-filter{min-width:100%}
}
body.im-page .progress-steps{padding:6px 2px 4px}
body.im-page .ps-item{min-width:96px}
body.im-page .ps-label{white-space:normal;max-width:104px}