/* Minification failed. Returning unminified contents.
(3,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,16): run-time error CSS1039: Token not allowed after unary operator: '-p2-header-height'
(32,21): run-time error CSS1039: Token not allowed after unary operator: '-p2-header-height'
(36,18): run-time error CSS1039: Token not allowed after unary operator: '-p2-header-height'
(424,13): run-time error CSS1039: Token not allowed after unary operator: '-p2-header-height'
(425,28): run-time error CSS1039: Token not allowed after unary operator: '-p2-header-height'
(428,13): run-time error CSS1039: Token not allowed after unary operator: '-p2-header-height'
(433,13): run-time error CSS1039: Token not allowed after unary operator: '-p2-header-height'
(434,28): run-time error CSS1039: Token not allowed after unary operator: '-p2-header-height'
(437,13): run-time error CSS1039: Token not allowed after unary operator: '-p2-header-height'
(440,13): run-time error CSS1039: Token not allowed after unary operator: '-p2-header-height'
(665,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(666,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(667,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(668,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(669,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(670,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(675,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-default'
(680,34): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-300'
(727,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-default'
(728,35): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-300'
(766,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-default'
(770,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-subtle'
(797,17): run-time error CSS1039: Token not allowed after unary operator: '-Text-Secondary'
(809,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-900'
(840,21): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-700'
(847,30): run-time error CSS1039: Token not allowed after unary operator: '-surface-subtle'
(871,26): run-time error CSS1039: Token not allowed after unary operator: '-surface-default'
(872,32): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-300'
(899,30): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-100'
(919,23): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-px'
(919,42): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-px'
(922,28): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary-500'
(923,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-default'
(924,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary-500'
(934,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-subtle'
(967,25): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-900'
(981,40): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-100'
(982,29): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-900'
(991,40): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-100'
(992,41): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary-500'
(993,29): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-900'
(1032,21): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-font-size'
(1033,23): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-line-height'
(1034,23): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-py'
(1035,26): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-py'
(1036,24): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-px'
(1037,25): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-pr'
(1047,23): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-py'
(1048,26): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-py'
(1049,24): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-px'
(1050,25): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-pr'
(1085,18): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-900'
(1096,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-500'
(1107,32): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-100'
(1108,21): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-500'
(1114,24): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-indent'
(1120,24): run-time error CSS1039: Token not allowed after unary operator: '-p2-nav-px'
(1151,25): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-700'
(1164,40): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-100'
(1165,29): run-time error CSS1039: Token not allowed after unary operator: '-brand-neutral-500'
 */
/* P2-style header (standalone CSS, no Tailwind dependency) */
body.has-p2-header {
  --p2-header-height: 60px;
  /* Shared brand palette for P2 header + nav */
  --brand-neutral-900: #404040;
  --brand-neutral-700: #777777;
  --brand-neutral-500: #b2b2b2;
  --brand-neutral-300: #e1e1e1;
  --brand-neutral-200: #f5f5f5;
  --brand-neutral-100: #fafafa;
  --brand-primary-500: #0074ad;
  --brand-primary-300: #c4e3f3;
  --surface-default: #ffffff;
  --surface-subtle: #f3f4f6;
}
.p2-header {
  font-family: "Open Sans", system-ui, sans-serif !important;
  background-color: #2B2B2B;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  width: 100%;
  height: var(--p2-header-height);
  min-height: 0;
  padding: 0 16px;
  box-sizing: border-box;
}
/* Reserve space for fixed header */
body.has-p2-header {
  padding-top: var(--p2-header-height);
}
@media (min-width: 640px) {
  .p2-header {
    height: var(--p2-header-height);
    min-height: 0;
    padding: 0 20px;
  }
}

.p2-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.p2-header__left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.p2-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

/* Wrapper sized by default block so search overlay is same length = no layout jump.
   Note: no `gap` here — only one in-flow child (the search overlay is absolutely
   positioned and excluded from flex layout). Spacing between icons lives on
   .p2-header__right-default below. */
.p2-header__right-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: fit-content;
  /* No min-width here: a min-width on this in-flow wrapper reserves space at every
     width and squeezes the logo on mobile. The search box sizing lives on the
     (absolutely-positioned) .p2-header__search-container, which may overflow this
     fit-content wrapper and extend leftward over the header when open. */
}

.p2-header__right-default {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (min-width: 640px) {
  .p2-header__right-default {
    gap: 24px;
  }
}

.p2-header__right-default--hidden {
  visibility: hidden;
  pointer-events: none;
}

/* Fixed size so hamburger doesn't change when sidebar is toggled (overrides .leftslidemenubutton padding) */
.p2-header__hamburger,
.p2-header__hamburger.leftslidemenubutton,
.p2-header__hamburger.leftslidemenubutton.is-collapsed {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #fff;
  float: none;
  box-sizing: border-box;
}
.p2-header__hamburger svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

.p2-header__logo {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0; /* never let the flex row collapse the logo on narrow screens */
}
/* Match Procorem-KISS/Procorem.Web header logo exactly: h-[25px] w-[146px] sm:h-8 sm:w-auto */
.p2-header__logo img {
  height: 25px;
  width: 146px;
  max-width: 100%;
  object-fit: contain;
}
@media (min-width: 640px) {
  .p2-header__logo img {
    height: 32px;
    width: auto;
    max-width: 100%;
  }
}

.p2-header__icon-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: #fff;
}
@media (min-width: 640px) {
  .p2-header__icon-btn {
    width: 32px;
    height: 32px;
  }
}
.p2-header__icon-btn svg {
  width: 24px;
  height: 24px;
}
@media (min-width: 640px) {
  .p2-header__icon-btn svg {
    width: 32px;
    height: 32px;
  }
}

.p2-header__help-wrap {
  position: relative;
}

.p2-header__user-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.p2-header__dropdown {
  font-family: "Open Sans", system-ui, sans-serif !important;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 12px;
  background: #fff;
  z-index: 1100;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  min-width: 280px;
}
.p2-header__dropdown[data-cloak] {
  display: none !important;
}

/* Force Open Sans on all header/dropdown text so it overrides Arial from global styles */
.p2-header,
.p2-header *,
.p2-header__dropdown,
.p2-header__dropdown * {
  font-family: "Open Sans", system-ui, sans-serif !important;
}

.p2-header__dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  color: #404040;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  box-sizing: border-box;
}
.p2-header__dropdown-item:hover {
  background: #f9fafb;
  color: #404040;
}

.p2-header__dropdown-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.p2-header__user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
}
.p2-header__user-name {
  display: none;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .p2-header__user-name {
    display: block;
  }
}

.p2-header__avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  background: #0074AD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border: none;
  padding: 0;
}
@media (min-width: 640px) {
  .p2-header__avatar {
    width: 40px;
    height: 40px;
  }
}
.p2-header__avatar-initials,
.p2-header__user-header-avatar-initials {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #0074AD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.p2-header__avatar-initials {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px; /* Matches P2 Tailwind text-sm so initials center vertically the same way */
}
.p2-header__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transform: scale(1.25);
}

.p2-header__chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.p2-header__chevron svg {
  width: 24px;
  height: 24px;
}

.p2-header__user-menu {
  padding: 8px 0;
}
.p2-header__user-menu .p2-header__dropdown-item {
  height: 44px;
}

.p2-header__user-header {
  border-bottom: 1px solid #F5F5F5;
  padding: 12px 16px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.p2-header__user-header-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #0074AD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
}
.p2-header__user-header-avatar-initials {
  font-weight: 700;
  font-size: 20px;
}
.p2-header__user-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transform: scale(1.25);
}
.p2-header__user-header-info {
  min-width: 0;
  flex: 1;
}
.p2-header__user-header-name {
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  color: #404040;
}
.p2-header__user-header-email {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #777;
  margin-top: 4px;
}
.p2-header__user-header-profile {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.98px;
  text-transform: uppercase;
  color: #0074AD;
  margin-top: 4px;
  text-decoration: none;
}
.p2-header__user-header-profile:hover {
  text-decoration: underline;
}

.p2-header__help-menu .p2-header__dropdown-item {
  height: 44px;
}
.p2-header__help-version {
  border-top: 1px solid #E1E1E1;
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 14px;
  color: #777;
  font-weight: 400;
  line-height: 18px;
}

.p2-header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  line-height: 11px;
  background: #C4E3F3;
  color: #404040;
}
.p2-header__badge--empty {
  background: #e5e7eb;
}

/* Alpine.js x-cloak */
[x-cloak] {
  display: none !important;
}

.left-side-bar {
  top: var(--p2-header-height) !important;
  height: calc(100% - var(--p2-header-height));
}
body.has-p2-header .left-side-bar {
  top: var(--p2-header-height) !important;
  transition: margin ease-in-out 0.1s, transform ease-in-out 0.1s !important;
}

#fake-border {
  top: var(--p2-header-height);
  height: calc(100% - var(--p2-header-height));
}
#posts .new-post-container.fixed-post {
  top: var(--p2-header-height);
}
.top-menu > li > ul {
  top: var(--p2-header-height);
}

/* Hide old #top wrapper (keeps it in DOM for JS but removes its 48px height and any margin) */
body.has-p2-header #top {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
  display: block;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.has-p2-header #top::after {
  display: none !important;
  content: none !important;
}
/* Ensure P2 header inside #top doesn't get pushed by any margin */
body.has-p2-header #top .p2-header {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure sidebar contents start flush at top (no gap) */
body.has-p2-header .left-side-bar > .left-side-bar-contents {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.has-p2-header .left-side-bar > .left-side-bar-contents > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Restore left spacing in sidebar menu items (match link padding) */
body.has-p2-header #content-wrapper .left-side-bar > .left-side-bar-contents .sidebar-menu-header {
  padding-left: 21px;
}

/* Adjust right sidebar pulltab (three-dot menu) to account for taller header */
body.has-p2-header #rightwrapper .pulltab {
  top: 112px;
}
/* Search Overlay */
.p2-header__search-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #2B2B2B;
  z-index: 1100;
  padding-right: 20px;
}
.p2-header__search-container {
  width: 100%;
  /* Usable width for the search box when open; kept on this overlay child (not the
     in-flow right wrapper) so it never squeezes the logo. Clamp to the viewport on the
     narrowest phones — 16px header + 20px overlay right padding — so it isn't pushed
     off-screen. */
  min-width: min(320px, 100vw - 36px);
}

.p2-header__search-input-wrap {
  width: 100%;
}
.p2-header__search-input-inner {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #E1E1E1;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  height: 40px;
  box-sizing: border-box;
}
.p2-header__search-submit-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #404040;
}
.p2-header__search-submit-btn:hover {
  color: rgba(64, 64, 64, 0.8);
}
.p2-header__search-submit-btn svg {
  width: 24px;
  height: 24px;
}
.p2-header__search-input {
  flex: 1;
  outline: none !important;
  border: none !important;
  background: transparent;
  color: #404040;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  min-width: 0;
  padding: 0;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.p2-header__search-input:focus,
.p2-header__search-input:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
.p2-header__search-input::placeholder {
  color: #404040;
}
.p2-header__search-clear-btn {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #404040;
}
.p2-header__search-clear-btn:hover {
  color: rgba(64, 64, 64, 0.8);
}
.p2-header__search-clear-btn svg {
  width: 16px;
  height: 16px;
}

/* Home-level "Back to home" link (Figma P2 Body/Medium) */
.back-to-home {
  display: inline-block;
  margin-top: 12px;
  margin-bottom: 12px;
  color: #777;
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}
.back-to-home:hover {
  color: #333;
  text-decoration: none;
}
.back-to-home .fa-chevron-left {
  margin-right: 6px;
}

/* My Accounts: heading + Create Account button row */
.accounts-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.accounts-page-title {
  margin: 0;
}
.p2-btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border: 1px solid #0074AD;
  background: #0074AD;
  box-shadow: 0 1px 2px 0 rgba(23, 32, 45, 0.05);
}
.p2-btn:hover,
.p2-btn:focus,
.p2-btn:active,
.p2-btn:visited {
  color: #fff;
  text-decoration: none;
}
.p2-btn:hover {
  background: #006394;
  border-color: #006394;
}

/* Sidebar contents: no reserved scrollbar gutter so content uses full width when not scrolling */
body.has-p2-header #sidebar-contents.left-side-bar-contents {
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}
/* P2 NAV RESKIN
   Goal: Make Procorem sidebar + breadcrumb match Procorem KISS look/feel.
   Keep Procorem markup unchanged (ids/classes for JS/Knockout).
   Primary overrides live here; additional related styles (e.g., .p2-accountHeader) also exist in legacy leftsidebar.less.
*/

/* ===========================
   SIDEBAR BASE (KISS-LIKE)
=========================== */

body.has-p2-header {
    --p2-nav-font-size: 16px;
    --p2-nav-line-height: 24px;
    --p2-nav-py: 12px;
    --p2-nav-px: 16px;
    --p2-nav-pr: 20px;
    --p2-nav-indent: 40px;
}
 
#content-wrapper #sidebar.left-side-bar,
#content-wrapper #sidebar .left-side-bar-contents {
    background: var(--surface-default) !important;
    border-left: none !important;
}

#content-wrapper #sidebar.left-side-bar {
    border-right: 1px solid var(--brand-neutral-300) !important;
    box-shadow: 4px 0 12px rgba(15, 23, 42, 0.08);
    /* Stacking: sidebar (1040) above main content (0); header (1050) stays on top; kebab dropdown (1000) stacks with sidebar */
    z-index: 1040 !important;
    /* Allow kebab dropdown to extend over content; scroll is on .left-side-bar-contents > ul.side-bar-menu */
    overflow: visible !important;
}

/* --- Sidebar layout: stacking + scroll (dropdown visible, no clipping) --- */
#content-wrapper #sidebar .left-side-bar-contents {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: visible !important;
}

    #content-wrapper #sidebar .left-side-bar-contents > .p2-accountHeader {
        flex-shrink: 0 !important;
        overflow: visible !important;
    }

    #content-wrapper #sidebar .left-side-bar-contents > ul.side-bar-menu {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

#sidebar .side-bar-menu,
#sidebar .sub-menu,
#sidebar .side-bar-menu.side-bar-single,
#sidebar .tabbable,
#sidebar .sidebar-user {
    background: transparent !important;
}

#sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===========================
   P2 ACCOUNT HEADER
=========================== */

#content-wrapper #sidebar .left-side-bar-contents .p2-accountHeader {
    padding: 12px 12px 12px 20px !important;
    background: var(--surface-default);
    border-bottom: 1px solid var(--brand-neutral-300);
    display: flex;
    flex-direction: column;
    gap: 4px !important;
}

    #content-wrapper #sidebar .left-side-bar-contents .p2-accountHeader .p2-accountHeader__logoLink {
        padding: 0 !important;
        background: transparent !important;
    }

    /* Logo row (direct child: only header, never kebab) */
    #content-wrapper #sidebar .left-side-bar-contents .p2-accountHeader > .p2-accountHeader__row--logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
    }

#content-wrapper #sidebar .left-side-bar-contents .p2-accountHeader__logoLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    color: inherit;
}

#content-wrapper #sidebar .left-side-bar-contents .p2-accountHeader__logo,
#content-wrapper #sidebar .left-side-bar-contents .p2-accountHeader__logoPlaceholder {
    width: 160px;
    height: 44px;
    overflow: hidden;
    border-radius: 2px;
}

#content-wrapper #sidebar .left-side-bar-contents .p2-accountHeader__logo {
    object-fit: contain;
    background: var(--surface-default);
}

#content-wrapper #sidebar .left-side-bar-contents .p2-accountHeader__logoPlaceholder {
    background: var(--surface-subtle);
}

/* Name row (direct child; kebab is sibling, not targeted here) */
#content-wrapper #sidebar .left-side-bar-contents .p2-accountHeader > .p2-accountHeader__row--name {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

#content-wrapper #sidebar .left-side-bar-contents .p2-accountHeader__titleBlock {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#content-wrapper #sidebar .left-side-bar-contents .p2-accountHeader__subTitle {
    font-family: "Open Sans", system-ui, sans-serif;
    font-size: 14px;
    line-height: 150%; /* 21px */
    font-weight: 400;
    font-style: normal;
    color: var(--Text-Secondary, #777);
    overflow-wrap: break-word;
}

#content-wrapper #sidebar .left-side-bar-contents .p2-accountHeader__nameLink {
    display: block;
    padding: 0;
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    font-family: "Open Sans", system-ui, sans-serif;
    color: var(--brand-neutral-900);
    text-decoration: none;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ===========================
   P2 SIDEBAR KEBAB
   Scoped: button + dropdown only. Edit here for menu behavior; do not touch header above.
=========================== */

#content-wrapper #sidebar .left-side-bar-contents .p2-sidebarKebab {
    position: relative;
    flex-shrink: 0;
}

    #content-wrapper #sidebar .left-side-bar-contents .p2-sidebarKebab .p2-kebabBtn {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        border-radius: 6px;
        cursor: pointer;
        color: var(--brand-neutral-700);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #content-wrapper #sidebar .left-side-bar-contents .p2-sidebarKebab .p2-kebabBtn:hover {
            background: var(--surface-subtle);
            color: #111827;
        }

        #content-wrapper #sidebar .left-side-bar-contents .p2-sidebarKebab .p2-kebabBtn i {
            font-size: 20px;
            line-height: 1;
        }

        #content-wrapper #sidebar .left-side-bar-contents .p2-sidebarKebab .p2-kebabBtn svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            stroke: currentColor;
            stroke-width: 2;
        }

    #content-wrapper #sidebar .left-side-bar-contents .p2-sidebarKebab .p2-kebabMenu {
        display: none;
        position: absolute;
        top: 24px;
        right: auto;
        left: -24px;
        min-width: 180px;
        background: var(--surface-default);
        border: 1px solid var(--brand-neutral-300);
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        width: 14rem;
        z-index: 1000;
        padding: 8px 0px !important;
    }

        #content-wrapper #sidebar .left-side-bar-contents .p2-sidebarKebab .p2-kebabMenu.is-open {
            display: block;
        }

    #content-wrapper #sidebar .left-side-bar-contents .p2-sidebarKebab .p2-kebabMenu__item {
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 4px;
        color: #111827;
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
        height: 44px;
        white-space: nowrap;
        padding: 0px 16px !important;
    }

        #content-wrapper #sidebar .left-side-bar-contents .p2-sidebarKebab .p2-kebabMenu__item:hover {
            background: var(--brand-neutral-100) !important;
        }

        #content-wrapper #sidebar .left-side-bar-contents .p2-sidebarKebab .p2-kebabMenu__item i,
        #content-wrapper #sidebar .left-side-bar-contents .p2-sidebarKebab .p2-kebabMenu__item svg {
            width: 1em;
            height: 1em;
            flex-shrink: 0;
        }

/* ===========================
   P2 SIDEBAR ACTION BUTTONS
   (Favorite / Email WorkCenter)
=========================== */

#content-wrapper #sidebar .left-side-bar-contents .p2-sidebarActionButton {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 220px;
    margin: 12px var(--p2-nav-px) 0 var(--p2-nav-px);
    padding: 10px 0px;
    border-radius: 2px;
    border: 1px solid var(--brand-primary-500);
    background: var(--surface-default);
    color: var(--brand-primary-500);
    font-family: "Open Sans", system-ui, sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

#content-wrapper #sidebar .left-side-bar-contents .p2-sidebarActionButton:hover {
    background: var(--surface-subtle);
}

        #content-wrapper #sidebar .left-side-bar-contents .p2-sidebarKebab .p2-kebabMenu__item svg {
            stroke: currentColor;
        }


/* ===========================
   OVERRIDE LEGACY: Link items (leaf)
   Legacy (leftsidebar.less) under #content-wrapper .left-side-bar:
   - li.sidebar-link a:hover { box-shadow: orange @sidebar-hoverbar-color } -> we want no bar, same hover bg
   - li.sidebar-link.active { background #e0e0e0 }, li.sidebar-link.active a { box-shadow: teal/orange }
   Target: selected = light bg + blue bar only; hover = same light bg; backgrounds match items.
   Use #content-wrapper #sidebar so we beat legacy specificity.
=========================== */

/* Leaf items flush-left: remove legacy gutter on ULs and list items */
#content-wrapper #sidebar .side-bar-menu,
#content-wrapper #sidebar .side-bar-menu.side-bar-single,
#content-wrapper #sidebar .menu-links {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

    #content-wrapper #sidebar .menu-links li.sidebar-link,
    #content-wrapper #sidebar .side-bar-menu li.sidebar-link {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

        /* Non-section links: match .c-navLink_text (brand-neutral-900, typography-md, font-weight 600) */
        #content-wrapper #sidebar .menu-links li.sidebar-link > a {
            color: var(--brand-neutral-900); /* brand-neutral-900 */
            font-size: 16px;
            line-height: 20px;
            font-weight: 600;
            text-decoration: none;
            background: transparent;
            border-left: 4px solid transparent; /* reserve for selection bar */
            display: block;
            width: 100%;
            box-sizing: border-box;
            padding: 11px 16px 11px 8px; /* text rail at 12px (4px bar + 8px) to match KISS */
        }

            #content-wrapper #sidebar .menu-links li.sidebar-link > a:hover {
                background-color: var(--brand-neutral-100); /* match .c-navLink:hover */
                color: var(--brand-neutral-900);
                box-shadow: none !important;
                -webkit-box-shadow: none !important;
                -moz-box-shadow: none !important;
            }

            /* Selected/active: light bg + primary bar; text stays brand-neutral-900 */
            #content-wrapper #sidebar .menu-links li.sidebar-link.active > a,
            #content-wrapper #sidebar .menu-links li.sidebar-link > a.active {
                background-color: var(--brand-neutral-100) !important;
                border-left-color: var(--brand-primary-500) !important;
                color: var(--brand-neutral-900) !important;
                box-shadow: none !important;
                -webkit-box-shadow: none !important;
                -moz-box-shadow: none !important;
            }

        #content-wrapper #sidebar .menu-links li.sidebar-link.active {
            background-color: transparent !important; /* bar on <a>, not on li */
        }

/* Catch-all: any sidebar-link active/hover must not show legacy orange/teal bar or left-edge line */
#content-wrapper #sidebar li.sidebar-link a:hover,
#content-wrapper #sidebar li.sidebar-link.active a {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* Remove any left-edge line from section headers and expandable items (legacy uses -1px box-shadow) */
#content-wrapper #sidebar .left-side-bar-contents a.sidebar-menu-header,
#content-wrapper #sidebar .left-side-bar-contents a.sub-menu-header,
#content-wrapper #sidebar .left-side-bar-contents .item-has-children > a {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    border-left: none !important;
}

#sidebar .menu-links li.sidebar-link > a i {
    margin-right: 10px;
    opacity: 0.85;
}

/* ===========================
   SECTION HEADERS (collapsible) & LEAF LINKS
   Normalize typography + spacing to P2/KISS values
=========================== */

body.has-p2-header #content-wrapper #sidebar.left-side-bar .left-side-bar-contents ul.menu-links li.sidebar-link > a {
    font-size: var(--p2-nav-font-size);
    line-height: var(--p2-nav-line-height);
    padding-top: var(--p2-nav-py);
    padding-bottom: var(--p2-nav-py);
    padding-left: var(--p2-nav-px);
    padding-right: var(--p2-nav-pr);
    height: auto;
    min-height: 0;
    box-sizing: border-box;
}

/* Section headers (collapsible): small label typography, same spacing as leaf links */
body.has-p2-header #content-wrapper #sidebar.left-side-bar .left-side-bar-contents a.sub-menu-header {
    font-size: 11px !important;
    line-height: 16px !important;
    padding-top: var(--p2-nav-py);
    padding-bottom: var(--p2-nav-py);
    padding-left: var(--p2-nav-px);
    padding-right: var(--p2-nav-pr);
    height: auto;
    min-height: 0;
    box-sizing: border-box;
}

/* P2 submenu headers: replace legacy caret with Feather chevron, with rotation on open/close */
body.has-p2-header #content-wrapper #sidebar a.rotate-caret::after {
    content: none !important;
}

body.has-p2-header #content-wrapper #sidebar a.sub-menu-header.rotate-caret {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

body.has-p2-header #content-wrapper #sidebar .p2-submenuHeader__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    transform: rotate(-90deg);
    color: inherit;
}

body.has-p2-header #content-wrapper #sidebar a.submenu-open .p2-submenuHeader__caret {
    transform: rotate(0deg);
}

body.has-p2-header #content-wrapper #sidebar .p2-submenuHeader__caret svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    stroke: var(--brand-neutral-900);
}

/* Preserve visual style for section headers (uppercase, lighter color) */
body.has-p2-header #content-wrapper #sidebar.left-side-bar > .left-side-bar-contents a.sidebar-menu-header,
body.has-p2-header #content-wrapper #sidebar.left-side-bar > .left-side-bar-contents a.sub-menu-header,
body.has-p2-header #content-wrapper #sidebar.left-side-bar > .left-side-bar-contents a.sidebar-menu-header.submenu-open,
body.has-p2-header #content-wrapper #sidebar.left-side-bar > .left-side-bar-contents a.sub-menu-header.submenu-open,
body.has-p2-header #content-wrapper #sidebar.left-side-bar > .left-side-bar-contents a.sidebar-menu-header.wcmenu-open,
body.has-p2-header #content-wrapper #sidebar.left-side-bar > .left-side-bar-contents a.sub-menu-header.wcmenu-open {
    background-color: transparent !important;
    color: var(--brand-neutral-500) !important; /* brand-neutral-500 */
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-decoration: none !important;
}

    body.has-p2-header #content-wrapper #sidebar.left-side-bar > .left-side-bar-contents a.sidebar-menu-header:hover,
    body.has-p2-header #content-wrapper #sidebar.left-side-bar > .left-side-bar-contents a.sub-menu-header:hover {
        background-color: var(--brand-neutral-100) !important; /* match nav hover */
        color: var(--brand-neutral-500) !important;
    }

/* Indent submenu leaf links (e.g. Data Views > Files) */
body.has-p2-header #content-wrapper #sidebar.left-side-bar .left-side-bar-contents
ul.sub-menu.menu-links li.sidebar-link > a {
    padding-left: var(--p2-nav-indent) !important;
}

/* Properties sub-links: align with top-level nav items, not the deeper sub-menu indent */
body.has-p2-header #content-wrapper #sidebar.left-side-bar .left-side-bar-contents
#propertiesSubMenu li.sidebar-link > a {
    padding-left: var(--p2-nav-px) !important;
}

/* Neutralize legacy "submenu shift" margin */
body.has-p2-header #content-wrapper #sidebar.left-side-bar .left-side-bar-contents
.side-bar-workcenter .sub-menu,
body.has-p2-header #content-wrapper #sidebar.left-side-bar .left-side-bar-contents
.side-bar-account .sub-menu {
    margin-left: 0;
}

/* ===========================
   SIDEBAR BACK BUTTON
=========================== */

#content-wrapper #sidebar .p2-sidebarBackButton-row {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

    #content-wrapper #sidebar .p2-sidebarBackButton-row li.sidebar-link {
        display: block;
        width: 100%;
    }

        #content-wrapper #sidebar .p2-sidebarBackButton-row li.sidebar-link > a.p2-sidebarBackButton {
            display: flex !important;
            align-items: center;
            width: 100% !important;
            padding: 18px 16px !important;
            color: var(--brand-neutral-700) !important;
            background: transparent !important;
            border: none !important;
            border-left: none !important;
            text-decoration: none;
            font-size: 14px !important;
            line-height: 16px !important;
            font-weight: 600;
            gap: 4px;
            box-sizing: border-box;
        }

            #content-wrapper #sidebar .p2-sidebarBackButton-row li.sidebar-link > a.p2-sidebarBackButton:hover {
                background-color: var(--brand-neutral-100) !important;
                color: var(--brand-neutral-500) !important;
                box-shadow: none !important;
            }

    #content-wrapper #sidebar .p2-sidebarBackButton-row .p2-sidebarBackButton__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        color: inherit;
    }

        #content-wrapper #sidebar .p2-sidebarBackButton-row .p2-sidebarBackButton__icon svg {
            width: 100%;
            height: 100%;
            stroke: currentColor;
        }

    #content-wrapper #sidebar .p2-sidebarBackButton-row .p2-sidebarBackButton__text {
        color: inherit !important;
    }