:root { --workspace-sidebar-width: 248px; }

.app-sidebar {
  --sidebar-brand-yellow: var(--anaim-yellow, #efd313);
  --app-surface-strong: #142d23;
  --app-surface-soft: #203d30;
  --app-surface: #142d23;
  --app-text: #e4eee8;
  --app-muted: #a6bdb0;
  --app-primary: #9ddabc;
  --app-border: #345343;
  --bs-offcanvas-width: min(var(--workspace-sidebar-width), 88vw);
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #142d23 0%, #254532 55%, #626528 82%, var(--sidebar-brand-yellow) 100%) !important;
  color: var(--app-text);
  border-right: 1px solid var(--app-border);
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 92px;
  padding: 20px;
  flex-shrink: 0;
}
.sidebar-brand { text-decoration: none; min-width: 0; }
.sidebar-brand .brand-logo {
  width: 44px;
  height: 44px;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: none;
}
.sidebar-brand .brand-name { color: #fff; font-size: 1.1rem; letter-spacing: .12em; }
.sidebar-brand .brand-sub { font-size: .7rem; letter-spacing: .04em; }
.sidebar-navigation {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--app-border) transparent;
  padding: 8px 14px 20px;
  /* Keep light menu labels readable over the yellow end of the gradient. */
  background: linear-gradient(180deg, transparent 35%, rgb(20 45 35 / 78%) 100%);
}
.sidebar-caption {
  margin: 0 12px 14px;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--app-muted);
}
.sidebar-menu, .sidebar-submenu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu > li + li { margin-top: 4px; }
.sidebar-link, .sidebar-sublink {
  color: var(--app-text);
  text-decoration: none;
  font-size: .84rem;
  border-radius: 8px;
  overflow-wrap: anywhere;
  transition: background-color 140ms ease, color 140ms ease;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  min-height: 42px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.sidebar-link::-webkit-details-marker { display: none; }
.sidebar-link > i:first-child { width: 18px; flex: 0 0 18px; text-align: center; margin: 0 !important; }
.sidebar-link > .sidebar-chevron { margin-left: auto; font-size: .6rem; transition: transform 140ms ease; }
.sidebar-group details[open] > summary .sidebar-chevron { transform: rotate(180deg); }
.sidebar-link:hover, .sidebar-sublink:hover { color: var(--app-text); background: var(--app-surface-soft); }
.sidebar-link.active, .sidebar-link.is-active {
  color: var(--app-primary);
  background: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface));
}
.sidebar-submenu { margin: 6px 0 10px 21px; padding-left: 17px; border-left: 1px solid var(--app-border); }
.sidebar-sublink { display: block; padding: 9px 10px; margin: 2px 0; font-size: .8rem; line-height: 1.45; }
.sidebar-sublink.active { color: var(--app-primary); font-weight: 650; background: var(--app-surface-soft); }
[data-bs-theme='dark'] .sidebar-link.active,
[data-bs-theme='dark'] .sidebar-link.is-active,
[data-bs-theme='dark'] .sidebar-sublink.active { color: #9cdaa8; }
.sidebar-link:focus-visible, .sidebar-sublink:focus-visible { outline: 2px solid var(--app-primary); outline-offset: -2px; }
.sidebar-footer { display: flex; align-items: center; gap: 8px; padding: 18px 24px; border-top: 1px solid rgb(20 45 35 / 20%); font-size: .7rem; font-weight: 600; color: #142d23; flex-shrink: 0; }
.sidebar-footer-dot { width: 6px; height: 6px; border-radius: 50%; background: #142d23; }

.app-header.app-header--workspace {
  margin: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--app-border);
  box-shadow: none;
  background: var(--app-surface-strong);
}
.workspace-topbar { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 24px; }
.workspace-context { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.workspace-eyebrow { color: var(--app-muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.workspace-title { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-account-menu { flex-shrink: 0; }
.app-account-menu .nav-user-btn { box-shadow: none; max-width: 260px; }
.app-account-menu .nav-user-btn > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-toggle { width: 40px; height: 40px; padding: 0; flex-shrink: 0; }

/* Only pages that actually include the sidebar receive a content offset. */
@media (min-width: 992px) {
  .app-sidebar.offcanvas-lg {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--workspace-sidebar-width);
    height: 100dvh;
    z-index: 1035;
  }
  .app-sidebar ~ .app-header--workspace { margin-left: var(--workspace-sidebar-width); }
  .app-sidebar ~ main.page-shell {
    margin-left: var(--workspace-sidebar-width);
    margin-right: 0;
    width: calc(100% - var(--workspace-sidebar-width));
    max-width: none;
  }
}
@media (max-width: 991.98px) {
  .workspace-topbar { padding: 10px 16px; min-height: 64px; }
  .sidebar-brand .brand-copy { display: flex; }
}
@media (max-width: 575.98px) {
  .app-account-menu .nav-user-btn > span:last-child { display: none; }
  .app-account-menu .nav-user-btn { padding: 5px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-sidebar, .sidebar-link, .sidebar-sublink, .sidebar-chevron { transition: none !important; }
}
@media print {
  .app-sidebar, .app-header--workspace { display: none !important; }
  .app-sidebar ~ main.page-shell { margin-left: 0; width: 100%; }
}
.sidebar-brand .brand-sub { color: #a6bdb0; }
.app-sidebar .btn-close { filter: invert(1); }
.app-sidebar .sidebar-link.active,.app-sidebar .sidebar-link.is-active { color: var(--sidebar-brand-yellow); background: #274b3a; box-shadow: inset 3px 0 0 var(--sidebar-brand-yellow); }
.sidebar-sublink.active { background: #203d30; }
.workspace-eyebrow { letter-spacing: .12em; }
.workspace-title { font-family: var(--v3-font-body); }