/* Scoped Sidebar header, organization selector, and desktop width treatment. */
:root {
  --saif-sidebar-width: 284px;
  --saif-sidebar-collapsed-width: 60px;
}

.saif-sidebar-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 66px;
  margin: 0 0 14px;
  padding: 6px 2px 6px 58px;
}

.saif-platform-logo {
  display: block;
  width: min(100%, 220px);
  height: 74px;
  padding: 0;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.saif-platform-logo-compact { display: none; }

.sidebar-collapse-button {
  position: absolute;
  inset: 50% auto auto 7px;
  display: inline-grid;
  place-items: center;
  z-index: 30;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(244,213,142,.42);
  border-radius: 12px;
  background: rgba(18,47,37,.86);
  color: #e8f3eb;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.sidebar-collapse-button svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .22s ease;
}

.sidebar-collapse-button .sidebar-collapse-chevron { display: block; transition: transform .22s ease; transform-origin: 15.5px 12px; }
.shell.sidebar-collapsed .sidebar-collapse-button .sidebar-collapse-chevron { transform: rotate(180deg); }

.sidebar-collapse-button:hover {
  transform: translateY(calc(-50% - 2px));
  border-color: rgba(244,213,142,.76);
  background: rgba(255,255,255,.15);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.sidebar-collapse-button:hover svg { transform: translateX(-1px); }
.sidebar-collapse-button:active { transform: translateY(-50%) scale(.97); }
.sidebar-collapse-button:focus-visible { outline: 3px solid rgba(244,213,142,.82); outline-offset: 3px; }
.sidebar-collapse-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sidebar-collapse-button::after {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: max-content;
  max-width: 190px;
  padding: 6px 9px;
  border: 1px solid rgba(197,154,80,.35);
  border-radius: 8px;
  background: #122f25;
  color: #f7fbf8;
  content: attr(aria-label);
  font: 700 10px/1.3 Tahoma, Arial, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .18s ease, transform .18s ease;
}

.sidebar-collapse-button:hover::after,
.sidebar-collapse-button:focus-visible::after { opacity: 1; transform: translateY(0); }

.side > .organization-identity-card {
  display: flex;
  position: relative;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  margin: 0 0 12px;
  padding: 9px 11px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.06));
  color: #f7fbf8;
  cursor: pointer;
  isolation: isolate;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.side > .organization-identity-card::before,
.side > .organization-identity-card::after { display: none !important; }
.side > .organization-identity-card:hover { transform: translateY(-2px); border-color: rgba(244,213,142,.7); background: rgba(255,255,255,.15); box-shadow: 0 10px 22px rgba(0,0,0,.16); }
.side > .organization-identity-card:active { transform: translateY(0) scale(.99); }
.side > .organization-identity-card:focus-visible { outline: 3px solid rgba(244,213,142,.82); outline-offset: 3px; }
.side > .organization-identity-card > div { display: flex; min-width: 0; flex: 1; align-items: center; padding: 0; border: 0; background: transparent; }
.side > .organization-identity-card .brand-logo { align-self: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 4px; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; background: #f7fbf8; object-fit: contain; }
.side > .organization-identity-card b { display: block; overflow: visible; color: #f7fbf8; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.side > .organization-identity-card small { display: none; }
.side > .organization-identity-card .organization-card-chevron { align-self: center; flex: 0 0 auto; color: #f4d58e; font-size: 17px; line-height: 1; transition: transform .22s ease; }
.side > .organization-identity-card .organization-card-chevron { display: grid; place-items: center; width: 24px; height: 24px; font-size: 0; }
.side > .organization-identity-card .organization-card-chevron::before { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ''; transform: rotate(45deg) translate(-1px,-1px); }
.side > .organization-identity-card[aria-expanded="true"] .organization-card-chevron { transform: rotate(180deg); }
.sidebar-rail-footer { display: none; }
.shell header .authenticated-language-switch,
.shell .side > #session-user { display: none !important; }
.side > nav > [data-page="settings"] { display: none !important; }
.sidebar-rail-footer { display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.sidebar-rail-icon,
.sidebar-rail-language { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #dbe9df; cursor: pointer; font: 500 13px/1.3 Tahoma, Arial, sans-serif; text-align: start; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.sidebar-rail-icon svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-rail-icon:hover,
.sidebar-rail-icon:focus-visible,
.sidebar-rail-language:hover,
.sidebar-rail-language:focus-visible { transform: translateY(-1px); border-color: rgba(244,213,142,.5); background: rgba(255,255,255,.1); box-shadow: 0 6px 14px rgba(0,0,0,.12); outline: none; }
.sidebar-rail-icon:active,
.sidebar-rail-language:active { transform: translateY(0) scale(.98); }
.sidebar-rail-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-rail-language { justify-content: flex-start; }
.sidebar-rail-footer + .store-open { margin-top: 12px; }

@media (min-width: 701px) {
  .shell > .side { overflow-y: auto; }
  .shell > .side .sidebar-rail-footer { position: sticky; bottom: 0; z-index: 2; background: var(--dark); }
}

@media (min-width: 701px) {
  .shell { max-width: 100vw; overflow-x: clip; }
  .shell > .side { width: var(--saif-sidebar-width); flex: 0 0 var(--saif-sidebar-width); }
  .shell > main { width: calc(100% - var(--saif-sidebar-width)); min-width: 0; }
  .shell.sales-context > main { width: calc(100% - var(--saif-sidebar-width) - 238px); min-width: 0; }
  .shell.sales-context #app { min-width: 0; }
  .shell.sidebar-collapsed > .side { width: var(--saif-sidebar-collapsed-width); flex-basis: var(--saif-sidebar-collapsed-width); padding-inline: 6px; }
  .shell.sidebar-collapsed > .side { background: #f5f6f8; color: #263342; border-inline-end: 1px solid #e1e5eb; }
  .shell.sidebar-collapsed > main { width: calc(100% - var(--saif-sidebar-collapsed-width)); }
  .shell.sidebar-collapsed.sales-context > main { width: calc(100% - var(--saif-sidebar-collapsed-width) - 238px); }
  .shell.sidebar-collapsed .saif-sidebar-brand { position: static; justify-content: center; min-height: 78px; margin-bottom: 12px; padding: 4px 0; }
  .shell.sidebar-collapsed .saif-platform-logo { display: none; }
  .shell.sidebar-collapsed .saif-platform-logo-compact { display: none; }
  .shell.sidebar-collapsed .sidebar-collapse-button { inset: 5px 7px auto auto; width: 46px; height: 46px; transform: none; opacity: 1; z-index: 30; }
  .shell.sidebar-collapsed .sidebar-collapse-button:hover { transform: translateY(-1px); }
  .shell.sidebar-collapsed .sidebar-collapse-button:active { transform: scale(.97); }
  .shell.sidebar-collapsed #session-user,
  .shell.sidebar-collapsed .store-open { display: none !important; }
  .shell.sidebar-collapsed .side > .organization-identity-card { justify-content: center; width: 44px; min-height: 44px; margin: 0 auto 14px; padding: 0; border-radius: 12px; }
  .shell.sidebar-collapsed .side > .organization-identity-card:not(.has-organization-logo) { display: none; }
  .shell.sidebar-collapsed .side > .organization-identity-card.organization-identity-card.has-organization-logo { display: flex; }
  .shell.sidebar-collapsed .side > .organization-identity-card > div,
  .shell.sidebar-collapsed .side > .organization-identity-card .organization-card-chevron { display: none; }
  .shell.sidebar-collapsed .side > .organization-identity-card .brand-logo { width: 42px; height: 42px; flex-basis: 42px; }
  .shell.sidebar-collapsed .sidebar-rail-footer { display: grid; justify-items: center; gap: 12px; }
  .shell.sidebar-collapsed .sidebar-rail-footer { margin: auto auto 0; gap: 10px; padding-top: 12px; }
  .shell.sidebar-collapsed .sidebar-rail-icon,
  .shell.sidebar-collapsed .sidebar-rail-language { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #263342; cursor: pointer; font: 500 13px/1 Tahoma, Arial, sans-serif; }
  .shell.sidebar-collapsed .sidebar-rail-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .shell.sidebar-collapsed .sidebar-rail-icon:hover,
  .shell.sidebar-collapsed .sidebar-rail-icon:focus-visible,
  .shell.sidebar-collapsed .sidebar-rail-language:hover,
  .shell.sidebar-collapsed .sidebar-rail-language:focus-visible { border-color: #d8dce5; background: #fff; outline: none; }
  .shell.sidebar-collapsed .sidebar-rail-language { height: 30px; margin-top: 4px; }
  .shell.sidebar-collapsed .sidebar-rail-label { display: none; }
  .shell.sidebar-collapsed .sidebar-rail-footer .sidebar-rail-icon:nth-child(2) { background: #e8e5ff; color: #5c4be5; }
  .shell.sidebar-collapsed .sidebar-rail-footer .sidebar-rail-icon:nth-child(2):hover,
  .shell.sidebar-collapsed .sidebar-rail-footer .sidebar-rail-icon:nth-child(2):focus-visible { background: #ddd9ff; }
  .shell.sidebar-collapsed nav { display: grid; justify-items: center; gap: 8px; }
  .shell.sidebar-collapsed nav .nav { position: relative; justify-content: center; gap: 0; width: 40px; min-height: 40px; height: 40px; padding: 0; border-radius: 11px; }
  .shell.sidebar-collapsed nav .nav > span { display: none !important; }
  .shell.sidebar-collapsed nav .nav i { width: 20px !important; height: 20px; flex-basis: 20px; }
  .shell.sidebar-collapsed nav .nav[data-page="dashboard"] { width: 32px; min-height: 32px; height: 32px; padding: 0; border-radius: 7px; }
  .shell.sidebar-collapsed nav .nav[data-page="dashboard"] i { width: 19px !important; height: 19px; flex-basis: 19px; }
  .shell.sidebar-collapsed nav .nav[data-page="dashboard"] i svg { width: 100%; height: 100%; }
  .shell.sidebar-collapsed nav .nav[data-page="dashboard"]:hover,
  .shell.sidebar-collapsed nav .nav[data-page="dashboard"].active { background: #fff; color: #263342; box-shadow: 0 1px 3px rgba(26,38,52,.08); transform: translateY(-1px); }
  .shell.sidebar-collapsed nav .nav:hover,
  .shell.sidebar-collapsed nav .nav.active { background: rgba(255,255,255,.13); color: #fff; box-shadow: none; transform: translateY(-1px); }
  .shell.sidebar-collapsed nav .nav.active { box-shadow: inset 3px 0 #f4d58e; }
  html[dir="rtl"] .shell.sidebar-collapsed nav .nav.active { box-shadow: inset -3px 0 #5c4be5; }
  .shell.sidebar-collapsed nav .nav { color: #263342; }
  .shell.sidebar-collapsed nav .nav:hover,
  .shell.sidebar-collapsed nav .nav.active { background: #fff; color: #263342; box-shadow: 0 1px 3px rgba(26,38,52,.08); }
  .shell.sidebar-collapsed nav .nav[data-page="dashboard"].active { background: transparent; box-shadow: none; transform: none; }
  html[dir="rtl"] .shell.sidebar-collapsed nav .nav[data-page="dashboard"].active,
  html[dir="ltr"] .shell.sidebar-collapsed nav .nav[data-page="dashboard"].active { box-shadow: none; }
  .shell.sidebar-collapsed nav .nav[data-page="dashboard"]:hover { background: transparent; box-shadow: none; transform: none; }
  .shell.sidebar-collapsed nav .nav::after { display: none; }
  .shell.sidebar-collapsed nav .nav::before { position: absolute; top: 50%; z-index: 30; width: max-content; max-width: 180px; padding: 7px 9px; border: 1px solid rgba(197,154,80,.4); border-radius: 8px; background: #122f25; color: #f7fbf8; content: attr(data-nav-tooltip); font: 700 11px/1.3 Tahoma,Arial,sans-serif; opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity .18s ease, transform .18s ease; }
  html[dir="rtl"] .shell.sidebar-collapsed nav .nav::before { right: calc(100% + 10px); }
  html[dir="ltr"] .shell.sidebar-collapsed nav .nav::before { left: calc(100% + 10px); }
  .shell.sidebar-collapsed nav .nav:hover::before,
  .shell.sidebar-collapsed nav .nav:focus-visible::before { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* The existing popover remains the same component; only its visual anchor changes. */
@media (min-width: 701px) {
  body:not(.sidebar-is-collapsed) html[dir="rtl"] .organization-account-popover,
  html[dir="rtl"] body:not(.sidebar-is-collapsed) .organization-account-popover { right: calc(var(--saif-sidebar-width) + 14px); left: auto; top: 116px; }
  body:not(.sidebar-is-collapsed) html[dir="ltr"] .organization-account-popover,
  html[dir="ltr"] body:not(.sidebar-is-collapsed) .organization-account-popover { left: calc(var(--saif-sidebar-width) + 14px); right: auto; top: 116px; }
  html[dir="rtl"] body.sidebar-is-collapsed .organization-account-popover { right: calc(var(--saif-sidebar-collapsed-width) + 14px); left: auto; }
  html[dir="ltr"] body.sidebar-is-collapsed .organization-account-popover { left: calc(var(--saif-sidebar-collapsed-width) + 14px); right: auto; }
}

@media (max-width: 700px) {
  .mobile-menu { display: grid; width: 44px; min-width: 44px; height: 44px; }
  .mobile-menu svg { width: 24px; height: 24px; }
  .shell > .side { width: min(284px, 88vw); right: calc(-1 * min(284px, 88vw)); }
  .shell > .side.open { right: 0; }
  html[dir="ltr"] .shell > .side { left: calc(-1 * min(284px, 88vw)); right: auto; }
  html[dir="ltr"] .shell > .side.open { left: 0; right: auto; }
  .saif-sidebar-brand { min-height: 62px; margin-bottom: 12px; }
  .saif-platform-logo { width: min(100%, 220px); height: 72px; }
  .side > .organization-identity-card { min-height: 64px; margin-bottom: 10px; padding: 8px 10px; }
  .side > .organization-identity-card .brand-logo { width: 38px; height: 38px; flex-basis: 38px; }
  .organization-account-popover { inset-inline: 12px; top: 88px; width: calc(100vw - 24px); max-height: calc(100dvh - 104px); overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-collapse-button,
  .sidebar-collapse-button svg,
  .sidebar-collapse-button .sidebar-collapse-chevron,
  .side > .organization-identity-card,
  .side > .organization-identity-card .organization-card-chevron { transition: none; }
  .shell.sidebar-collapsed nav .nav::before,
  .saif-platform-logo-compact { transition: none; }
  .sidebar-collapse-button:hover,
  .side > .organization-identity-card:hover,
  .side > .organization-identity-card:active { transform: none; }
}

.shell:not(.sidebar-collapsed) .side > nav .nav { width: 100%; min-height: 44px; border-radius: 11px; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease, font-size .18s ease; }
.shell:not(.sidebar-collapsed) .side > nav .nav:hover:not(.active) { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.shell:not(.sidebar-collapsed) .side > nav .nav:focus-visible { outline: 3px solid rgba(244,213,142,.82); outline-offset: 2px; }
.shell:not(.sidebar-collapsed) .side > nav .nav:active { transform: translateY(1px); }
.shell:not(.sidebar-collapsed) .side > nav .nav.active { min-height: 52px; padding: 12px 14px; background: linear-gradient(90deg,#2a5a46,#316b51); border: 1px solid rgba(244,213,142,.28); color: #fff; font-size: 16px; font-weight: 800; box-shadow: inset -4px 0 var(--gold), 0 8px 18px rgba(0,0,0,.14); }
.shell:not(.sidebar-collapsed) .side > nav .nav.active > i { width: 24px !important; height: 24px; flex-basis: 24px; color: #f4d58e; }
.shell:not(.sidebar-collapsed) .side > nav .nav.active::after { inset-inline-start: 10px; bottom: 5px; width: calc(100% - 20px); background: #f4d58e; }
.shell:not(.sidebar-collapsed) .side > nav .nav { min-height: 56px; padding: 8px 12px; }
.shell:not(.sidebar-collapsed) .side > nav .nav > i,
.shell:not(.sidebar-collapsed) .side > nav .nav.active > i { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }
.shell:not(.sidebar-collapsed) .side > nav .nav.active { min-height: 64px; padding: 10px 14px; }
@media (max-width: 700px) {
  .shell:not(.sidebar-collapsed) .side > nav .nav { min-height: 52px; padding: 6px 10px; }
  .shell:not(.sidebar-collapsed) .side > nav .nav.active { min-height: 60px; padding: 8px 12px; font-size: 15px; }
}

@media (min-width: 701px) and (max-height: 850px) {
  .shell:not(.sidebar-collapsed) .side > nav .nav { min-height: 52px !important; padding: 6px 10px !important; }
  .shell:not(.sidebar-collapsed) .side > nav .nav.active { min-height: 56px !important; padding: 8px 12px !important; font-size: 15px; }
  .shell.dashboard-fullscreen .side > nav { gap: 6px; }
  .shell.dashboard-fullscreen .sidebar-rail-footer { gap: 6px !important; padding-top: 8px !important; }
}