@scope (.native-shell) {
/*
 * sidebar-account.css — Sidebar account chrome styles (foot + user popup).
 *
 * Owned module: public/assets/css/core/sidebar/
 *
 * Covers the .foot row at the bottom of the sidebar and the .user-popup
 * popover that opens to its right:
 *   - .foot row (avatar, name, email, ucaret)
 *   - .user-popup positioning + open/close transition
 *   - .up-header (avatar, verified, email)
 *   - .up-branch button + .up-branch-list dropdown
 *   - .up-divider
 *   - .up-item (Dark mode / Settings / Log out)
 *   - .up-toggle (segmented switch)
 *   - .up-footer (Ollira Admin · Terms)
 *
 */

.foot {
  padding: 12px 16px 14px 16px;
  border-top: 1px solid var(--c-border-soft);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.35s ease;
  overflow: hidden;
}
.foot:hover { background: var(--c-foot-hover); }
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--app-theme-fill,#4ba3ff), var(--app-theme-fill,#1a7fe6));
  color: #fff;
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.uinfo { flex: 1; min-width: 0; }
.uname {
  color: var(--c-text-medium); font-size: 13px; font-weight: 500; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.35s ease;
}
.umail {
  color: var(--c-text-soft); font-size: 11px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.35s ease;
}

/* The .foot.open animation translates the .ucaret chevron 2px right
 * (no rotation) — kinetic cue matching the popup's rightward open. */
.ucaret {
  width: 14px;
  height: 14px;
  color: var(--c-text-soft);
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}
.foot.open .ucaret {
  transform: translateX(2px);
  color: var(--c-text);
}

/* .foot owns the sidebar's outer 18px bottom-corner radius. */
.sb .foot {
  border-radius: 0 0 var(--ollira-frame-radius, 18px) var(--ollira-frame-radius, 18px);
}


.user-popup {
  position: absolute;
  left: calc(100% + 10px);
  bottom: 0;
  background: var(--c-popup-bg);
  border: 1px solid var(--c-popup-border);
  border-radius: 16px;
  padding: 10px;
  width: 280px;
  box-shadow: var(--c-up-popup-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.35s ease;
  z-index: 200;
}
.user-popup.open { opacity: 1; pointer-events: auto; transform: translateX(0); }

/* The compact rail must not let a closed off-canvas popup enlarge the page.
 * Keep the popup inside the viewport; opening it still preserves the same
 * anchored account-menu behavior. */
@media (max-width: 900px) {
  .user-popup {
    position: fixed;
    left: 72px;
    right: 10px;
    bottom: 10px;
    width: auto;
    max-width: 280px;
  }
}

.up-header { display: flex; align-items: center; gap: 12px; padding: 10px 8px 14px; }
.up-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--app-theme-fill,#4ba3ff), var(--app-theme-fill,#1a7fe6));
  color: #fff; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.up-name-row { flex: 1; min-width: 0; }
.up-name {
  display: flex; align-items: center; gap: 6px;
  color: var(--c-text); font-size: 13px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.35s ease;
}
.verified { width: 14px; height: 14px; flex-shrink: 0; fill: var(--app-theme-fill,#4ba3ff); }
.up-email {
  color: var(--c-text-muted); font-size: 11px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
  transition: color 0.35s ease;
}


.up-divider { height: 1px; background: var(--c-up-divider); margin: 6px 0; transition: background 0.35s ease; }
.up-item {
  text-decoration: none;
  display: flex; align-items: center; gap: 12px;
  /* 11px vertical → ~40px row, a comfortable touch target on touch laptops. */
  padding: 11px 12px; border-radius: 9px;
  font-size: 13px; color: var(--c-text-medium);
  cursor: pointer; user-select: none;
  transition: background 0.12s, color 0.35s ease;
}
.up-item:hover { background: var(--c-popup-hover); color: var(--c-text); }
.up-item svg.up-ic { width: 16px; height: 16px; flex-shrink: 0; }
.up-item span { flex: 1; }
.up-item.danger { color: var(--status-cancelled); }
.up-item.danger:hover { color: var(--status-cancelled); background: rgba(239, 68, 68, 0.08); }
.sb.theme-light .up-item.danger,
:scope[data-app-theme="light"] .sb .up-item.danger { color: var(--status-cancelled); }
.sb.theme-light .up-item.danger:hover,
:scope[data-app-theme="light"] .sb .up-item.danger:hover { color: var(--status-cancelled-ink); background: rgba(220, 38, 38, 0.06); }

.up-language { position: relative; }
.up-language__trigger { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; }
.up-language__value { flex: 0 1 auto !important; color: var(--c-text-muted); font-size: 12px; white-space: nowrap; }
.up-language__caret { width: 14px; height: 14px; flex: 0 0 auto; transition: transform 0.16s ease; }
.up-language.is-open .up-language__caret { transform: rotate(180deg); }
.up-language__list {
  display: grid; gap: 2px; padding: 4px; margin: 2px 8px 6px;
  border: 1px solid var(--c-popup-button-border); border-radius: 10px;
  background: var(--c-popup-button);
}
.up-language__list[hidden] { display: none; }
.up-language__option {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px;
  padding: 7px 9px; border: 0; border-radius: 7px; background: transparent;
  color: var(--c-text-medium); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.up-language__option:hover,
.up-language__option:focus-visible { background: var(--c-popup-hover); color: var(--c-text); outline: none; }
.up-language__option.is-selected { color: var(--c-text); font-weight: 600; }
.up-language__code {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 22px;
  border-radius: 6px; background: var(--c-popup-hover); color: var(--c-text-muted);
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
}
.up-language__check { width: 15px; height: 15px; margin-left: auto; opacity: 0; }
.up-language__option.is-selected .up-language__check { opacity: 1; color: var(--app-theme-accent,#0a84ff); }

.up-toggle {
  width: 36px; height: 20px;
  background: var(--app-theme-fill,#4ba3ff); border-radius: 999px;
  position: relative; cursor: pointer; flex-shrink: 0;
  transition: background 0.2s;
}
.up-toggle::after {
  content: ''; position: absolute;
  top: 2px; left: 18px;
  width: 16px; height: 16px;
  background: #fff; border-radius: 50%;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.up-toggle.off { background: #d4d4d8; }
/* Dark-mode toggle paint — dual selector so the runtime class AND the
 * first-paint <:scope data-app-theme> attribute both win their cascade. */
.sb:not(.theme-light) .up-toggle.off,
:scope[data-app-theme="dark"] .sb .up-toggle.off { background: #2e2e32; }
.up-toggle.off::after { left: 2px; }

.up-footer {
  padding: 12px 12px 8px; font-size: 11px;
  color: var(--c-text-dim); text-align: center;
  border-top: 1px solid var(--c-up-divider); margin-top: 6px;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.up-footer a {
  color: var(--c-text-muted); text-decoration: none; cursor: pointer;
  transition: color 0.35s ease;
}
.up-footer a:hover { color: var(--c-text); }


/* === Logout form — wraps the .up-item.danger row ========================
 * The logout row is wrapped in a <form method="post" action="/logout">
 * with CSRF so logout is a real POST. The clickable target is a
 * <button type="submit"> styled to match the surrounding .up-item rows;
 * the rules below neutralise the button-default chrome (border,
 * background, font, alignment) so it visually matches a <div>. */
.up-item.up-item--logout {
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
}


/* === Branch dropdown (in-popup, button + listbox) ======================
 * The sidebar partial renders .up-branch as a real button wired to a
 * server-side list. The .up-branch-list is a DOM CHILD of .up-branch
 * (not a sibling) so the `top: calc(100% + 4px)` rule resolves against
 * the button height and the list pops 4px below it. */
.up-branch {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--c-popup-button);
  border: 1px solid var(--c-popup-button-border);
  border-radius: 12px;
  font-size: 13px; color: var(--c-text); font-weight: 500;
  cursor: pointer; margin-bottom: 6px;
  transition: background 0.12s, color 0.35s ease, border-color 0.35s ease;
  position: relative;
}
.up-branch:hover { background: var(--c-popup-hover); }
.up-branch svg { width: 16px; height: 16px; flex-shrink: 0; }
.up-branch .br-caret { margin-left: auto; width: 14px; height: 14px; opacity: 0.5; transition: transform 0.15s ease; }
.up-branch.is-open { background: var(--c-popup-hover); }
.up-branch.is-open .br-caret { transform: rotate(180deg); }

.up-branch-list {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  background: var(--c-popup-bg);
  border: 1px solid var(--c-popup-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--c-popup-shadow);
  max-height: 220px;
  overflow-y: auto;
  z-index: 220;
  display: none;
}
.up-branch-list.is-open { display: block; }
/* Organization caption — rendered only for a principal who belongs to more than one, so it
 * is a quiet separator rather than a heading. First one loses its top margin. */
.up-branch-list-org {
  padding: 6px 10px 4px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-text-soft, var(--c-text-medium));
  opacity: 0.7;
}
.up-branch-list-org + .up-branch-list-item { margin-top: 0; }
.up-branch-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--c-text-medium);
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.up-branch-list-item:hover { background: var(--c-popup-hover); color: var(--c-text); }
.up-branch-list-item.is-current { color: var(--c-text); font-weight: 500; }
.up-branch-list-item .check {
  margin-left: auto; width: 14px; height: 14px;
  opacity: 0; transition: opacity 0.12s ease;
  fill: none; stroke: var(--c-rail-active); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.up-branch-list-item.is-current .check { opacity: 1; }

}