/* Canonical NGD identity shared by Buyer, Seller, Admin and Operations. */
:root {
  --a-accent: var(--ngd-brand-primary);
  --a-accent-strong: var(--ngd-brand-primary-hover);
  --a-accent-soft: var(--ngd-brand-tint);
  --a-ink: #0b1220;
  --a-ink-2: #3a4657;
  --a-muted: #626b79;
  --a-bg: #f5f7fb;
  --a-surface: #ffffff;
  --a-surface-2: #f5f7fb;
  --a-line: #e7eaf1;
  --a-line-2: #d7dce6;
  --supplier-focus: var(--ngd-brand-primary);
  --ngd-color-primary: var(--ngd-brand-primary);
  --ngd-logo-mark-size: 7px;
}

html,
body {
  font-family: var(--ngd-font-sans);
  color: var(--a-ink);
}

.ngdBrandLockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: auto;
  min-width: 0;
  color: var(--a-ink);
  white-space: nowrap;
}

.ngdBrandLockup > .ngdBrandDiamond,
.ngdBrandDiamond {
  display: inline-block !important;
  width: var(--ngd-logo-mark-size) !important;
  height: var(--ngd-logo-mark-size) !important;
  min-width: var(--ngd-logo-mark-size) !important;
  flex: 0 0 var(--ngd-logo-mark-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 1px !important;
  background: var(--ngd-brand-primary) !important;
  color: transparent !important;
  box-shadow: none !important;
  transform: rotate(45deg) !important;
}

.ngdBrandLockup > b,
.ngdBrandWord {
  display: inline-block;
  margin: 0;
  color: var(--a-ink) !important;
  font:650 18px/1 var(--ngd-font-sans) !important;
  letter-spacing: 0 !important;
}

.ngdBrandMeta {
  display: block;
  color: var(--a-muted);
  font:600 10.5px/1.25 var(--ngd-font-sans);
  letter-spacing: 0;
}

/* Buyer identity */
.ngdLogo,
.footerLogo,
.ngdAuthLogo,
.buyerDeskLogo,
.buyerDeskFootBrand > .ngdBrandLockup {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ngdLogo .mark,
.footerLogo .footerMark,
.ngdAuthLogo > span:first-child {
  width: var(--ngd-logo-mark-size) !important;
  height: var(--ngd-logo-mark-size) !important;
  min-width: var(--ngd-logo-mark-size) !important;
  padding: 0 !important;
  border-radius: 1px !important;
  background: var(--ngd-brand-primary) !important;
  color: transparent !important;
  transform: rotate(45deg) !important;
}

.ngdAuthLogo > span:not(.ngdBrandDiamond) {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  transform: none !important;
}

.ngdDeskShell .buyerLogoMark,
.ngdDeskShell .buyerSideBrand,
.buyerDeskFootBrand .buyerLogoMark {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--a-ink) !important;
}

.ngdDeskShell .buyerSideBrand::before {
  content: none !important;
}

/* Seller identity */
.sellerNivodaShell .sellerNivodaLogo {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.sellerNivodaShell .sellerNivodaLogo .ngdBrandDiamond,
.sellerAuthLogo .ngdBrandDiamond {
  width: var(--ngd-logo-mark-size) !important;
  height: var(--ngd-logo-mark-size) !important;
  min-width: var(--ngd-logo-mark-size) !important;
  background: var(--ngd-brand-primary) !important;
}

.sellerNivodaShell .sellerNivodaLogo b {
  color: var(--a-ink) !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
}

/* Admin identity */
.ngdAdminShell .ngdBrandBlock {
  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 12px 10px !important;
  background: transparent !important;
  border-color: transparent !important;
}

.ngdAdminShell .ngdBrandMark.ngdBrandDiamond {
  width: var(--ngd-logo-mark-size) !important;
  height: var(--ngd-logo-mark-size) !important;
}

.ngdAdminShell .ngdBrandBlock b {
  color: var(--a-ink) !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
}

.ngdLoginMark.ngdBrandLockup {
  width: auto !important;
  height: auto !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Operations identity */
.opsBuyerClone .opsDeskLogo .ngdBrandDiamond {
  display: inline-block !important;
  width: var(--ngd-logo-mark-size) !important;
  height: var(--ngd-logo-mark-size) !important;
  min-width: var(--ngd-logo-mark-size) !important;
  background: var(--ngd-brand-primary) !important;
  transform: rotate(45deg) !important;
}

.opsBuyerClone .opsDeskLogo b {
  color: var(--a-ink) !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
}

.opsSideBrand {
  margin: 12px 16px 4px !important;
}

/* Inverted lockups keep the same mark and proportions on dark brand panels. */
.ngdFooter .ngdBrandLockup > b,
.sellerAuthHero .ngdBrandLockup > b,
.ngdLoginAside .ngdBrandLockup > b {
  color: #ffffff !important;
}

.ngdFooter .ngdBrandMeta,
.sellerAuthHero .ngdBrandMeta,
.ngdLoginAside .ngdBrandMeta {
  color: rgba(255, 255, 255, 0.68) !important;
}

/* Shared interaction and legacy accent cleanup. */
:where(.ngdDeskShell, .sellerNivodaShell, .ngdAdminShell, .opsBuyerClone, .ngdAuthExperience, .sellerAuthPage, .ngdLogin, .opsLogin) :focus-visible {
  outline: 2px solid var(--ngd-brand-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--ngd-brand-tint) !important;
}

.sellerAuthTitle > span,
.sellerLinkBtn,
.sellerInlineMsg.working,
.ngdLoginKicker,
.opsLoginBrand {
  color: var(--ngd-brand-primary) !important;
}

.sellerAuthPage {
  background: linear-gradient(135deg, #f5f7fb, #ffffff) !important;
}

.sellerAuthHero h1 {
  color: #ffffff !important;
}

.sellerAuthSubmit,
.ngdLogin .adminLoginBtn.btn,
.opsLogin .opsLoginBtn.btn.purple {
  background: var(--ngd-brand-primary) !important;
  border-color: var(--ngd-brand-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.sellerAuthSubmit:hover,
.ngdLogin .adminLoginBtn.btn:hover,
.opsLogin .opsLoginBtn.btn.purple:hover {
  background: var(--ngd-brand-primary-hover) !important;
  border-color: var(--ngd-brand-primary-hover) !important;
}

.ngdLoginProof span {
  border-color: rgba(11, 181, 166, 0.4) !important;
  background: rgba(11, 181, 166, 0.14) !important;
  color: #7ee0d7 !important;
}

.opsLogin h1 {
  color: var(--a-ink) !important;
  letter-spacing: 0 !important;
}

.opsLogin input:focus {
  border-color: var(--ngd-brand-primary) !important;
  box-shadow: 0 0 0 3px var(--ngd-brand-tint) !important;
}

.sellerAuthCard input:focus,
.sellerAuthCard select:focus,
.sellerAuthCard textarea:focus {
  border-color: var(--ngd-brand-primary) !important;
  box-shadow: 0 0 0 3px var(--ngd-brand-tint) !important;
}

.ngdLegalFooter a {
  color: var(--ngd-brand-primary) !important;
}

/* [premium-refresh] Single-source 3px teal brand hairline at the very top of EVERY portal
   (buyer/seller already had it via buyer-clean-a.css; this gives admin + ops the same signature
   so all four portals agree at the first pixel row). One rule, all surfaces. */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  height: 3px !important;
  background: var(--ngd-brand-primary) !important;
  z-index: 99999 !important;
  pointer-events: none !important;
}

/* =====================================================================
   [premium-refresh] Shared interaction foundation — one consistent set of
   input-focus, disabled and pressed states across all four portals. Uses
   :where() (zero specificity) so any portal's more specific rule still wins;
   this only fills the gaps where a portal had nothing.
   ===================================================================== */
:where(.ngdDeskShell, .sellerNivodaShell, .ngdAdminShell, .opsBuyerClone) input:not([type="checkbox"]):not([type="radio"]):focus,
:where(.ngdDeskShell, .sellerNivodaShell, .ngdAdminShell, .opsBuyerClone) select:focus,
:where(.ngdDeskShell, .sellerNivodaShell, .ngdAdminShell, .opsBuyerClone) textarea:focus {
  border-color: var(--ngd-brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(10, 114, 102, 0.18) !important;
  outline: none !important;
}

:where(.ngdDeskShell, .sellerNivodaShell, .ngdAdminShell, .opsBuyerClone) button:disabled,
:where(.ngdDeskShell, .sellerNivodaShell, .ngdAdminShell, .opsBuyerClone) .btn:disabled,
:where(.ngdDeskShell, .sellerNivodaShell, .ngdAdminShell, .opsBuyerClone) .btn[disabled] {
  background: var(--a-surface-2) !important;
  color: var(--a-muted) !important;
  border: 1px solid var(--a-line) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

@media (prefers-reduced-motion: no-preference) {
  :where(.ngdDeskShell, .sellerNivodaShell, .ngdAdminShell, .opsBuyerClone) button:not(:disabled):active,
  :where(.ngdDeskShell, .sellerNivodaShell, .ngdAdminShell, .opsBuyerClone) .btn:not(:disabled):active {
    transform: translateY(1px);
    filter: brightness(0.97);
  }
}

@media (max-width: 640px) {
  .ngdBrandLockup {
    gap: 8px !important;
  }

  .ngdBrandLockup > b,
  .ngdBrandWord {
    font-size: 17px !important;
  }
}

/* =====================================================================
   REAL NGD LOGO  (replaces the drawn teal-diamond mark + "NGD" text)
   The elegant serif NGD monogram from the brand package is rendered as a
   background image on every lockup; the placeholder diamond + wordmark are
   hidden. Light surfaces get the black logo, dark surfaces the white one.
   ===================================================================== */
:root {
  --ngd-logo-img: url("/brand/diamvo-logo-black.svg");
  --ngd-logo-img-inv: url("/brand/diamvo-logo-white.svg");
  --ngd-logo-h: 28px;
  --ngd-logo-w: 116px;
}

/* Generic lockup → show the logo, hide the drawn diamond + NGD text (keep tagline). */
.ngdBrandLockup::before {
  content: "";
  flex: 0 0 auto;
  width: var(--ngd-logo-w);
  height: var(--ngd-logo-h);
  background: var(--ngd-logo-img) left center / contain no-repeat;
}
.ngdBrandLockup > .ngdBrandDiamond,
.ngdBrandLockup .ngdBrandDiamond,
.ngdBrandLockup > b,
.ngdBrandLockup > span > b.ngdBrandWord,
.ngdBrandLockup .ngdBrandWord {
  display: none !important;
}
/* [ui] The logo already reads "NGD" — drop the redundant tagline text beside it everywhere
   ("Diamond Marketplace", "B2B Diamond Marketplace", "Diamond trade command center"). */
.ngdBrandMeta,
.ngdBrandLockup .ngdBrandMeta,
.ngdBrandLockup > span > small,
.ngdAdminShell .ngdBrandBlock small,
.ngdAuthLogo small {
  display: none !important;
}

/* Admin sidebar brand block is NOT an .ngdBrandLockup — swap the mark to the logo. */
.ngdAdminShell .ngdBrandBlock {
  grid-template-columns: var(--ngd-logo-w) minmax(0, 1fr) !important;
  align-items: center !important;
}
.ngdAdminShell .ngdBrandBlock .ngdBrandMark.ngdBrandDiamond {
  width: var(--ngd-logo-w) !important;
  height: var(--ngd-logo-h) !important;
  min-width: var(--ngd-logo-w) !important;
  flex: 0 0 var(--ngd-logo-w) !important;
  background: var(--ngd-logo-img) left center / contain no-repeat !important;
  transform: none !important;
  border-radius: 0 !important;
}
.ngdAdminShell .ngdBrandBlock b.ngdBrandWord {
  display: none !important;
}

/* The desk/header logo button must be a clean logo, never a boxed button. */
.buyerDeskLogo,
.buyerNivodaLogo,
.ngdDeskLogo,
.sellerNivodaLogo,
.opsDeskLogo,
.footerLogo,
.ngdAuthLogo,
.ngdLogo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Dark surfaces → white logo. */
.ngdFooter .ngdBrandLockup::before,
.siteFooter .ngdBrandLockup::before,
.buyerDeskFooter .ngdBrandLockup::before,
.sellerAuthHero .ngdBrandLockup::before,
.ngdLoginAside .ngdBrandLockup::before,
.ngdAuthAside .ngdBrandLockup::before {
  background-image: var(--ngd-logo-img-inv);
}

/* Login brand marks are a bigger moment — render the logo larger. */
.ngdLoginMark.ngdBrandLockup::before,
.sellerAuthLogo.ngdBrandLockup::before,
.opsLoginBrand.ngdBrandLockup::before,
.ngdAuthBrand.ngdBrandLockup::before {
  width: 176px;
  height: 44px;
}

@media (max-width: 640px) {
  :root { --ngd-logo-w: 98px; --ngd-logo-h: 24px; }
}

/* [part8-r7] Legal footer must stay light. b2b-theme.css sets a bare
   `footer,.footer{background:var(--b2b-ink)!important}` that otherwise forces this
   additive legal footer dark in every portal. This more-specific class, loaded LAST,
   restores the intended light 2-colour treatment (neutral surface + teal links). */
.ngdLegalFooter {
  background: #f8fafc !important;
  color: #64748b !important;
  border-top: 1px solid #e2e8f0 !important;
}
.ngdLegalFooter a {
  color: #0A7266 !important; /* [ui-fix] was var(--a-accent,#0bb5a6) ~2.46:1 on the light footer; #0A7266 ~5.6:1 (WCAG AA) */
  text-decoration: none !important;
}
.ngdLegalFooter a:hover { text-decoration: underline !important; }


/* Diamvo approved brand kit · final integration */
.diamvoSymbol {
  display:inline-block; width:22px; height:22px; flex:0 0 22px;
  background:url("/brand/diamvo-symbol.svg") center/contain no-repeat;
}
.ngdLoginMark.ngdBrandLockup, .sellerAuthLogo.ngdBrandLockup, .opsLoginBrand.ngdBrandLockup, .ngdAuthBrand.ngdBrandLockup {
  min-width: 176px;
}