/* Owner-supplied Canvas logos; role navigation and subtitles stay in place. */
.canvas-brand-logo {
  display: block;
  width: 154px;
  height: 42px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  flex: 0 1 auto;
  min-width: 0;
}
/* Replace the old mark-sized grid column, including approved !important rules. */
html body[data-cabinet-role] :is(.sidebar .brand, .ms-sidebar .brand, .df-brand, .dir-brand, .ca-v2-brand, .finance-brand, .ord-brand):has(> .canvas-brand-logo) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}
body[data-cabinet-role="finance"] .finance-mobile-identity:has(> .canvas-brand-logo) {
  display: flex;
  min-width: 0;
  align-items: center;
}
.mpr-brand:has(> .canvas-brand-logo) {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 4px;
}
body[data-cabinet-role="entry"] .login-card .brand {
  flex-direction: row;
}
@media (max-width: 1200px) {
  body[data-cabinet-role="docflow"] .df-brand > .canvas-brand-logo {
    content: url("/assets/canvas-logo-black.svg");
  }
  html body[data-cabinet-role="docflow"] .df-sidebar .df-brand:has(> .canvas-brand-logo) {
    flex-direction: row !important;
    align-items: center !important;
  }
}

body[data-cabinet-role="supervisor"] .supervisor-mobile-identity {
  display: flex;
}
@media (max-width: 1200px) {
  html.supervisor-nav-loading:not(.supervisor-nav-ready) body[data-cabinet-role="supervisor"] .ms-app::before {
    content: "";
    background-image: url("/assets/canvas-logo-black.svg") !important;
    background-position: 18px center !important;
    background-size: 154px 42px !important;
    background-repeat: no-repeat !important;
  }
}

/* Admin uses the owner black logo; isolate its light brand surface from the dark navigation. */
body[data-cabinet-role="admin"] .app-shell > .sidebar .brand:has(> .canvas-brand-logo) {
  background: #ffffff;
}
body[data-cabinet-role="admin"] .app-shell > .sidebar .brand:has(> .canvas-brand-logo) .brand-subtitle {
  color: var(--canvas-muted);
}

/* Employee navigation reuses the DO composition; Admin is deliberately outside this scope. */
/* The shared toolbar follows the Finance consumer admission boundary. */
html body.canvas-employee-nav[data-cabinet-role="finance"]:has([data-finance-app][hidden]) > .canvas-mobile-header {
  display: none !important;
}
body[data-cabinet-role="entry"] .login-card .brand {
  justify-content: center;
}
body[data-cabinet-role="entry"] .login-card .brand > :not(.canvas-brand-logo) {
  display: none;
}
body[data-cabinet-role="entry"] .login-card .canvas-brand-logo {
  object-position: center;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  scrollbar-gutter: auto !important;
  padding: 14px 12px !important;
  background: var(--canvas-nav) !important;
  color: #fff !important;
  box-sizing: border-box !important;
  border-right: 1px solid rgb(255 255 255 / 8%) !important;
  font-family: var(--canvas-font) !important;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-brand {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: flex-start !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 64px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-brand > :not(.canvas-brand-logo),
html body.canvas-employee-nav[data-cabinet-role] :is(.side-group-label, .chevron, .finance-user-avatar, .ord-user__avatar, .dir-user-card > i) {
  display: none !important;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-user {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 59px !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid rgb(255 255 255 / 8%) !important;
  border-radius: 12px !important;
  background: rgb(255 255 255 / 5%) !important;
  color: #fff !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-user strong {
  display: block !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-user :is(small, .user-card > span) {
  display: block !important;
  margin-top: 4px !important;
  color: rgb(255 255 255 / 62%) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-nav {
  position: static !important;
  display: flex !important;
  flex: 1 0 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  scrollbar-gutter: auto !important;
  background: transparent !important;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-link {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #b6b9cc !important;
  box-shadow: none !important;
  font: 600 14px/1.35 var(--canvas-font) !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
  box-sizing: border-box !important;
  cursor: pointer;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-link:hover {
  background: rgb(255 255 255 / 6%) !important;
  color: #fff !important;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-link:is(.active, .is-active, [aria-current="page"]) {
  background: rgb(255 255 255 / 8%) !important;
  color: #fff !important;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-icon {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 8%) !important;
  color: inherit !important;
  font-size: 14px !important;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-link:is(.active, .is-active, [aria-current="page"]) .canvas-role-icon {
  background: var(--canvas-accent) !important;
  color: #fff !important;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
html body.canvas-employee-nav[data-cabinet-role] .canvas-sidebar-close,
html body.canvas-employee-nav[data-cabinet-role] :is(.finance-mobile-header, .ord-mobile-header, .supervisor-mobile-header, .supervisor-sidebar-close, .finance-sidebar-close, .ord-sidebar__close, .df-mobile-nav-toggle, [data-finance-nav-scrim], [data-ord-nav-scrim], .supervisor-nav-scrim) {
  display: none !important;
}
@media (min-width: 1201px) {
  html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar {
    position: sticky !important;
    top: 0 !important;
    width: var(--canvas-sidebar-width) !important;
    min-width: var(--canvas-sidebar-width) !important;
    height: 100dvh !important;
    overflow: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
  html body.canvas-employee-nav[data-cabinet-role] :is([data-app], [data-lead-app], .dir-app, .ca-v2-app, .df-app, .ms-app, .finance-shell, .ord-shell) {
    grid-template-columns: var(--canvas-sidebar-width) minmax(0, 1fr) !important;
  }
  /* Manager uses the existing block workspace with a fixed sidebar. */
  html body.canvas-employee-nav[data-cabinet-role="manager"] :is([data-app], [data-lead-app]) > .canvas-role-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
  }
}
@media (max-width: 1200px) {
  html body.canvas-employee-nav[data-cabinet-role] .canvas-mobile-header {
    position: sticky;
    z-index: 140;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--canvas-border);
    background: var(--canvas-surface);
    box-sizing: border-box;
  }
  html body.canvas-employee-nav[data-cabinet-role] .canvas-mobile-menu {
    display: grid;
    place-items: center;
  }
  html body.canvas-employee-nav[data-cabinet-role] .canvas-mobile-menu svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }
  html body.canvas-employee-nav[data-cabinet-role] :is(.app-shell, [data-app], [data-lead-app], .dir-app, .ca-v2-app, .df-app, .ms-app, .finance-shell, .ord-shell):not([hidden]) {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    margin: 0 !important;
  }
  html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar {
    position: fixed !important;
    z-index: 150 !important;
    inset: 0 auto 0 0 !important;
    width: min(320px, 84vw) !important;
    min-width: 0 !important;
    max-width: 320px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transform: translateX(-105%) !important;
    transition: transform 180ms ease-out !important;
    overscroll-behavior: contain;
  }
  html body.canvas-employee-nav.canvas-nav-open[data-cabinet-role] .canvas-role-sidebar {
    transform: translateX(0) !important;
  }
  html body.canvas-employee-nav.canvas-nav-open {
    overflow: hidden !important;
  }
  html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar .canvas-role-brand > .canvas-brand-logo {
    content: normal !important;
  }
  html body.canvas-employee-nav[data-cabinet-role] .canvas-sidebar-close {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    display: grid !important;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 8%);
    color: #fff;
    font: 24px/1 var(--canvas-font);
  }
  html body.canvas-employee-nav[data-cabinet-role] .canvas-nav-scrim:not([hidden]) {
    position: fixed;
    z-index: 145;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgb(17 16 38 / 46%);
  }
  html body.canvas-employee-nav[data-cabinet-role="manager"] :is([data-app], [data-lead-app]) > .main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  html body.canvas-employee-nav[data-cabinet-role="manager"] :is([data-app], [data-lead-app]) > .main-content > .topbar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body.canvas-employee-nav[data-cabinet-role] :is(.finance-workspace, .ord-workspace, .ms-main, .dir-workspace, .ca-v2-main, .df-main) {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}
/* The Manager scroll container shares the viewport with the 64px mobile header. */
@media (min-width: 992px) and (max-width: 1200px) {
  html body.canvas-employee-nav[data-cabinet-role="manager"] :is([data-app], [data-lead-app]) > .main-content {
    height: calc(100dvh - 64px) !important;
    min-height: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body.canvas-employee-nav[data-cabinet-role] .canvas-role-sidebar {
    transition: none !important;
  }
}

/* Finance's native brand wrapper no longer adds a second inset or stacking row. */
html body.canvas-employee-nav[data-cabinet-role="finance"] .finance-sidebar-head {
  position: static;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}