/* Brand mark: top-left in headers; fixed variant for standalone login pages.
   --kb-brand-shell-padding-* = manager dashboard .sidebar padding (24px) from viewport
   to the brand shell; not less than safe-area on notched devices.
   --kb-brand-mark-*-nudge: optical shift shared with admin .admin-sidebar-brand + img.

   Logo box sizing: Admin → Branding sets --kb-logo-height / --kb-logo-width (and
   matching inline height/width) on each mark. Never let the compact 32px fallback
   win over those settings — including against older cached CSS that used !important.
   Layout/shell chrome (sidebar, topbar) lives elsewhere — do not hardcode logo px there. */
:root {
  --kb-brand-visual-leading: 8px;
  --kb-brand-mark-stack-clearance: 42px;
  --kb-brand-shell-padding-x: max(24px, env(safe-area-inset-left, 0px));
  --kb-brand-shell-padding-y: max(24px, env(safe-area-inset-top, 0px));
  --kb-brand-mark-wrapper-nudge: -6px;
  --kb-brand-mark-img-nudge: -10px;
  /* Fallback only when a mark does not set --kb-logo-height (≈ Tailwind h-8) */
  --kb-header-logo-height: 32px;
  /* KB mobile: top bar outer height (inner row ~52px + shell padding top/bottom) — keeps main content offset in sync */
  --kb-brand-mobile-topbar-block: calc(52px + 2 * var(--kb-brand-shell-padding-y));
  /* Content gutter from viewport right on KB (matches common 16px sidebar right on admin) */
  --kb-brand-content-gutter-inline: max(16px, var(--kb-brand-shell-padding-x));
}

.kb-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
}
.kb-brand-mark img,
.kb-brand-mark > span[aria-hidden="true"] {
  height: var(--kb-logo-height, var(--kb-header-logo-height)) !important;
  max-height: var(--kb-logo-height, var(--kb-header-logo-height)) !important;
  width: var(--kb-logo-width, auto) !important;
  max-width: var(--kb-logo-width, 120px) !important;
  display: block;
  object-fit: contain;
  margin-left: var(--kb-brand-mark-img-nudge);
}
/* Same mark column as manager dashboard: KB desktop header + mobile top bar */
.kb-header-left .kb-brand-mark,
.kb-mobile-topbar .kb-header-brands {
  margin-left: var(--kb-brand-mark-wrapper-nudge);
}
.kb-mobile-topbar .kb-header-brands .kb-brand-mark {
  margin-left: 0;
}
.kb-brand-mark:focus-visible {
  outline: 2px solid #f58220;
  outline-offset: 3px;
  border-radius: 6px;
}
/* User console: DHI + Apollo logos; Apollo mark links to apollo_portal_url */
.kb-header-brands {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  line-height: 0;
}
/* Branding cluster: sizes come from --kb-logo-* on each mark (Admin → Branding) */
.kb-header-brands img,
.kb-header-brands .kb-apollo-mark > span[aria-hidden="true"] {
  object-fit: contain;
  display: block;
}
.kb-apollo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
  overflow: hidden;
  height: var(--kb-logo-height, var(--kb-header-logo-height));
  max-height: var(--kb-logo-height, var(--kb-header-logo-height));
  width: var(--kb-logo-width, auto);
  max-width: var(--kb-logo-width, none);
}
.kb-apollo-mark img,
.kb-apollo-mark > span[aria-hidden="true"] {
  height: var(--kb-logo-height, var(--kb-header-logo-height)) !important;
  max-height: var(--kb-logo-height, var(--kb-header-logo-height)) !important;
  width: var(--kb-logo-width, auto) !important;
  max-width: var(--kb-logo-width, none) !important;
  display: block;
  object-fit: contain;
}
.kb-apollo-mark:focus-visible {
  outline: 2px solid #f58220;
  outline-offset: 3px;
  border-radius: 6px;
}
/* Manager console: text-only Back to Apollo in sidebar footer */
.sidebar-link-back-apollo {
  display: block;
}
/* Viewport top-left (login / SSO / dev gate). z-index below drawer/modal overlays (e.g. 95+). */
.kb-brand-mark--fixed {
  position: fixed;
  top: var(--kb-brand-shell-padding-y);
  left: calc(var(--kb-brand-shell-padding-x) + var(--kb-brand-mark-wrapper-nudge));
  z-index: 92;
  margin: 0;
}

/* Login / SSO / access gate: full brand cluster (DHI + Apollo + optional logos) */
.kb-header-brands--fixed {
  position: fixed;
  top: var(--kb-brand-shell-padding-y);
  left: calc(var(--kb-brand-shell-padding-x) + var(--kb-brand-mark-wrapper-nudge));
  z-index: 92;
  margin: 0;
}
.kb-header-brands--fixed .kb-brand-mark {
  margin-left: 0;
}

/* Set class kb-fixed-brand-page on login / SSO bodies so content clears the fixed mark; horizontal gutters match KB shell. */
body.kb-fixed-brand-page {
  padding-top: max(16px, calc(var(--kb-brand-shell-padding-y) + var(--kb-brand-mark-stack-clearance)));
  padding-left: var(--kb-brand-content-gutter-inline);
  padding-right: var(--kb-brand-content-gutter-inline);
  padding-bottom: 16px;
  box-sizing: border-box;
}