/* SRTTS sidebar - compact, Claude-style. Loaded LAST (after dark.css) and uses its own .sb-* classes,
   so older sidebar rules in style.css / redesign.css / dark.css cannot interfere.
   Change the width here:  --sidebar-width in the first @media block. */

@media (min-width: 769px) {
  :root {
    --sidebar-width: 232px;
  }
}

aside.app-sidebar.sb {
  --sb-bg: #F2F2F2;
  --sb-text: #1C1C1C;
  --sb-muted: #696969;
  --sb-hover: rgba(103, 103, 103, .09);
  --sb-active: rgba(103, 103, 103, .15);
  --sb-active-text: #494949;
  --sb-border: #DEDEDE;
  --sb-pop: #FFFFFF;
  --sb-pop-border: #D9D9D9;
  --sb-danger: #B4232F;
  --sb-focus: #5A5A5A;
  --sb-badge-bg: #676767;
  --sb-badge-text: #FFFFFF;
  background: var(--sb-bg);
  color: var(--sb-text);
  border-right: 1px solid var(--sb-border);
  padding: 10px 0 0;
  gap: 0;
  box-sizing: border-box;
  font-family: var(--font-body, 'Inter', -apple-system, 'Segoe UI', sans-serif);
  scrollbar-width: thin;
}

html[data-theme="dark"] aside.app-sidebar.sb {
  --sb-bg: #171717;
  --sb-text: #EBEBEB;
  --sb-muted: #A4A4A4;
  --sb-hover: rgba(255, 255, 255, .07);
  --sb-active: rgba(147, 147, 147, .22);
  --sb-active-text: #FFFFFF;
  --sb-border: #2A2A2A;
  --sb-pop: #1D1D1D;
  --sb-pop-border: #424242;
  --sb-danger: #FFA9AE;
  --sb-focus: #B4B4B4;
  --sb-badge-bg: #7A7A7A;
  --sb-badge-text: #FFFFFF;
}

/* ---- Brand ---- */
.sb .sb-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px 12px;
  color: var(--sb-text);
  text-decoration: none;
}

.sb .sb-brand:hover {
  color: var(--sb-text);
  text-decoration: none;
}

.sb .sb-logo {
  display: block;
  width: 100%;
  max-width: 190px;
  height: 58px;
  object-fit: cover;
  object-position: 50% 100%;
}

html[data-theme="dark"] .sb .sb-logo {
  background: #F2F2F2;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 3px 8px;
}

/* ---- Search (in sidebar) ---- */
.sb .sb-search {
  position: relative;
  margin: 0 8px 12px;
}

.sb .sb-search .sb-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--sb-muted);
  pointer-events: none;
}

.sb .sb-search input {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  padding: 0 12px 0 42px;
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  background: var(--sb-pop);
  color: var(--sb-text);
  font: inherit;
  font-size: 13.5px;
}

.sb .sb-search input::placeholder {
  color: var(--sb-muted);
}

.sb .sb-search input:focus {
  outline: 2px solid var(--sb-focus);
  outline-offset: -1px;
}

@media (pointer: coarse),
(max-width: 768px) {
  .sb .sb-search input {
    height: 42px;
  }
}

/* ---- Navigation ---- */
.sb .sb-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 8px 12px;
}

.sb .sb-label {
  margin: 0;
  padding: 0 10px 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--sb-muted);
}

.sb .sb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sb .sb-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 8px;
  color: var(--sb-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s ease;
}

.sb .sb-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb .sb-link:hover {
  background: var(--sb-hover);
  color: var(--sb-text);
  text-decoration: none;
  transform: none;
}

.sb .sb-link.is-active,
.sb .sb-link.is-active:hover {
  background: var(--sb-active);
  color: var(--sb-active-text);
  font-weight: 600;
}

/* ---- Focus ring (keyboard), visible in light and dark ---- */
.sb .sb-link:focus-visible,
.sb .sb-user:focus-visible,
.sb .sb-brand:focus-visible,
.sb .sb-menu a:focus-visible,
.sb .sb-menu button:focus-visible {
  outline: 2px solid var(--sb-focus);
  outline-offset: -2px;
}

/* ---- Nav icons (inline SVG, follows text color). Hide all with: .sb .sb-ico { display: none; } ---- */
.sb .sb-ico {
  flex: none;
  width: 20px;
  height: 20px;
  opacity: .85;
}

.sb .sb-link:hover .sb-ico {
  opacity: 1;
}

.sb .sb-link.is-active .sb-ico {
  opacity: 1;
}

.sb .sb-tl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sb .sb-menu .sb-ico {
  width: 18px;
  height: 18px;
}

/* ---- Count badge (shown only when the count is above 0) ---- */
.sb .sb-badge {
  flex: none;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--sb-badge-bg);
  color: var(--sb-badge-text);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Account row (pinned to the bottom) ---- */
.sb .sb-foot {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 8px;
  background: var(--sb-bg);
  border-top: 1px solid var(--sb-border);
}

.sb .sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 7px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sb-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sb .sb-user:hover,
.sb .sb-user.is-open {
  background: var(--sb-hover);
}

.sb .sb-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #676767;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.sb .sb-who {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb .sb-who strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb .sb-who small {
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--sb-muted);
}

/* small CSS caret on the account button (delete these 2 rules to remove it) */
.sb .sb-user::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 6px 3px 0;
  border-right: 1.6px solid var(--sb-muted);
  border-bottom: 1.6px solid var(--sb-muted);
  transform: rotate(45deg);
}

.sb .sb-user.is-open::after {
  margin-bottom: -3px;
  transform: rotate(225deg);
}

/* ---- Account pop-up menu ---- */
.sb .sb-menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 6px);
  z-index: 30;
  background: var(--sb-pop);
  border: 1px solid var(--sb-pop-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 14px 36px rgba(20, 20, 20, .28);
}

.sb .sb-menu[hidden] {
  display: none;
}

.sb .sb-mail {
  padding: 8px 10px 6px;
  font-size: 12px;
  color: var(--sb-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb .sb-menu a,
.sb .sb-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sb-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.sb .sb-menu a:hover,
.sb .sb-menu button:hover {
  background: var(--sb-hover);
  color: var(--sb-text);
  text-decoration: none;
}

.sb .sb-menu .sb-out,
.sb .sb-menu .sb-out:hover {
  color: var(--sb-danger);
}

.sb .sb-sep {
  height: 1px;
  background: var(--sb-border);
  margin: 6px 4px;
}

.sb .sb-sw {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sb-muted);
}

.sb .sb-track {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 99px;
  background: #CBCBCB;
  transition: background-color .2s;
}

.sb .sb-track::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}

.sb #themeToggle[aria-checked="true"] .sb-track {
  background: #7A7A7A;
}

.sb #themeToggle[aria-checked="true"] .sb-track::after {
  transform: translateX(14px);
}

/* ---- Short screens (e.g. 1366x768 laptops): tighten so nothing needs scrolling ---- */
@media (max-height: 680px) {
  aside.app-sidebar.sb {
    padding-top: 6px;
  }

  .sb .sb-brand {
    padding: 6px 12px 8px;
  }

  .sb .sb-logo {
    height: 46px;
    max-width: 150px;
  }

  .sb .sb-search {
    margin-bottom: 8px;
  }

  .sb .sb-nav {
    gap: 8px;
    padding-bottom: 8px;
  }

  .sb .sb-link {
    min-height: 31px;
    font-size: 13.5px;
  }
}

@media (max-height: 560px) {
  .sb .sb-label {
    display: none;
  }

  .sb .sb-logo {
    height: 38px;
    max-width: 124px;
  }

  .sb .sb-link {
    min-height: 29px;
  }
}

/* Touch / phones keep comfortable tap targets */
@media (pointer: coarse),
(max-width: 768px) {

  .sb .sb-link,
  .sb .sb-menu a,
  .sb .sb-menu button {
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sb .sb-link,
  .sb .sb-track,
  .sb .sb-track::after {
    transition: none;
  }
}

/* ---- Mobile drawer: while it is off screen its links must not be reachable with the keyboard ---- */
@media (max-width: 768px) {
  aside.app-sidebar.sb {
    visibility: hidden;
    transition: left .35s var(--ease-out, ease), visibility 0s linear .35s;
  }

  aside.app-sidebar.sb.open {
    visibility: visible;
    transition: left .35s var(--ease-out, ease), visibility 0s;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {

  aside.app-sidebar.sb,
  aside.app-sidebar.sb.open {
    transition: none;
  }
}

/* ---- Top bar: empty now, hidden on desktop; on phones it just leaves room for the Menu button ---- */
@media (min-width: 769px) {
  .app-topbar {
    display: none;
  }
}

/* ---- Icons inside buttons (added by assets/js/btn-icons.js). Hide all with: .btn .btn-ico { display: none; } ---- */
.btn .btn-ico {
  flex: none;
  width: 18px;
  height: 18px;
}

.btn-sm .btn-ico {
  width: 16px;
  height: 16px;
}

/* ================= Collapsible sidebar (desktop) ================= */
.sb .sb-mark {
  display: none;
}

.sb .sb-collapse {
  display: none;
}

@media (min-width: 769px) {
  html.sb-collapsed {
    --sidebar-width: 60px;
  }

  aside.app-sidebar.sb {
    transition: width .25s ease;
    overflow-x: hidden;
  }

  .app-main {
    transition: margin-left .25s ease;
  }

  /* round toggle sitting on the sidebar edge */
  .sb .sb-collapse {
    display: grid;
    place-items: center;
    position: fixed;
    top: 22px;
    left: calc(var(--sidebar-width) - 11px);
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    z-index: 310;
    cursor: pointer;
    background: var(--sb-pop);
    color: var(--sb-text);
    border: 1px solid var(--sb-pop-border);
    box-shadow: 0 4px 12px rgba(20, 20, 20, .18);
    transition: left .25s ease, background-color .15s ease;
  }

  .sb .sb-collapse:hover {
    background: var(--sb-hover);
  }

  .sb .sb-collapse:focus-visible {
    outline: 2px solid var(--sb-focus);
    outline-offset: 2px;
  }

  .sb .sb-collapse svg {
    transition: transform .25s ease;
  }

  html.sb-collapsed .sb .sb-collapse svg {
    transform: rotate(180deg);
  }

  /* collapsed: icon rail.
     Nothing is moved or resized here, only the text is hidden, so every icon stays exactly where it was
     when the sidebar was open (same x and same y). Row heights, gaps and padding are NOT changed. */
  html.sb-collapsed .sb .sb-logo {
    visibility: hidden;          /* still takes its space, so everything below keeps its height */
  }

  html.sb-collapsed .sb .sb-mark {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
  }

  /* a group title keeps its height and becomes a thin divider line in the same slot */
  html.sb-collapsed .sb .sb-label {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    user-select: none;
  }

  html.sb-collapsed .sb .sb-label::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(50% - 2px);
    border-top: 1px solid var(--sb-border);
  }

  html.sb-collapsed .sb .sb-text,
  html.sb-collapsed .sb .sb-who,
  html.sb-collapsed .sb .sb-user::after {
    display: none;
  }

  /* the count badge becomes a small bubble on the corner of the icon */
  html.sb-collapsed .sb .sb-badge {
    position: absolute;
    top: 2px;
    left: 26px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
    box-shadow: 0 0 0 2px var(--sb-bg);
  }

  /* search turns into an icon button: same box position, only narrower */
  html.sb-collapsed .sb .sb-search {
    width: 44px;
  }

  html.sb-collapsed .sb .sb-search .sb-ico {
    color: var(--sb-text);
  }

  html.sb-collapsed .sb .sb-search input {
    width: 44px;
    padding: 0;
    color: transparent;
    cursor: pointer;
  }

  html.sb-collapsed .sb .sb-search input::placeholder {
    color: transparent;
  }

  html.sb-collapsed .sb .sb-menu {
    position: fixed;
    left: calc(var(--sidebar-width) + 8px);
    right: auto;
    bottom: 12px;
    width: 230px;
  }
}

@media (prefers-reduced-motion: reduce) {

  aside.app-sidebar.sb,
  .app-main,
  .sb .sb-collapse,
  .sb .sb-collapse svg {
    transition: none;
  }
}

/* =====================================================================
   SIDEBAR v3 - refined look (overrides the base rules above, scoped to .sb)
   1 logo: smaller, centred, more breathing room     2 pill search
   3 uppercase section labels, even spacing           4 soft active state + left accent, subtle hover
   5 every icon 20x20 with the same 1.8 stroke (about 1.5px on screen)
   ===================================================================== */
aside.app-sidebar.sb {
  --sb-primary: #5A5A5A;
  --sb-label: #888888;
  --sb-icon: #696969;
  --sb-hover-tint: rgba(90, 90, 90, .07);
  --sb-active-tint: rgba(90, 90, 90, .11);
  --sb-alert: #D93B4A;
  --sb-warn: #F5A524;
  --sb-warn-ink: #3A2400;
}

html[data-theme="dark"] aside.app-sidebar.sb {
  --sb-primary: #9D9D9D;
  --sb-label: #8E8E8E;
  --sb-icon: #A4A4A4;
  --sb-hover-tint: rgba(255, 255, 255, .06);
  --sb-active-tint: rgba(157, 157, 157, .18);
  --sb-alert: #F0616D;
  --sb-warn: #F5B73F;
}

/* ---- 1. Logo ---- */
.sb .sb-brand {
  justify-content: center;
  padding: 22px 20px 20px;
}

.sb .sb-logo {
  width: auto;
  max-width: 100%;
  height: 46px;
  margin: 0 auto;
}

/* ---- 2. Search: soft pill ---- */
.sb .sb-search {
  margin: 0 12px 6px;
}

.sb .sb-search .sb-ico {
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sb-label);
}

.sb .sb-search input {
  height: 40px;
  padding: 0 40px 0 42px;
  border: 1px solid var(--sb-border);
  border-radius: 999px;
  background: var(--sb-pop);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sb .sb-search input:hover {
  border-color: var(--sb-pop-border);
}

.sb .sb-search input:focus {
  outline: 0;
  border-color: var(--sb-primary);
  box-shadow: 0 0 0 3px var(--sb-active-tint);
}

.sb .sb-kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 20px;
  height: 20px;
  box-sizing: border-box;
  padding: 0 5px;
  border: 1px solid var(--sb-border);
  border-radius: 6px;
  color: var(--sb-label);
  font: 600 11px/18px var(--font-body, 'Inter', sans-serif);
  text-align: center;
  pointer-events: none;
}

.sb .sb-search input:focus ~ .sb-kbd {
  opacity: 0;
}

/* ---- 3. Section labels + spacing ---- */
.sb .sb-nav {
  gap: 0;
  padding: 8px 12px 16px;
}

.sb .sb-group + .sb-group {
  margin-top: 22px;
}

.sb .sb-label {
  margin: 0;
  padding: 0 12px 8px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--sb-label);
}

.sb .sb-list {
  gap: 4px;
}

/* ---- Menu links: same left padding for every row so icons and text line up ---- */
.sb .sb-link {
  gap: 12px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--sb-text);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* ---- 5. Icons: one size, one stroke, outline only ---- */
.sb .sb-link .sb-ico {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  opacity: 1;
  stroke-width: 1.8;
  color: var(--sb-icon);
  transition: color .18s ease;
}

.sb .sb-ico * {
  fill: none;
}

/* ---- 4. Hover and active ---- */
.sb .sb-link:hover {
  background: var(--sb-hover-tint);
  color: var(--sb-text);
}

.sb .sb-link:hover .sb-ico {
  color: var(--sb-text);
  background: none;
  transform: none;
}

.sb .sb-link.is-active,
.sb .sb-link.is-active:hover {
  background: var(--sb-active-tint);
  box-shadow: inset 4px 0 0 var(--sb-primary);
  color: var(--sb-active-text);
  font-weight: 700;
}

.sb .sb-link.is-active .sb-ico,
.sb .sb-link.is-active:hover .sb-ico {
  background: none;
  box-shadow: none;
  color: var(--sb-primary);
}

.sb .sb-link.is-active::before {
  content: none;
}

/* ---- Count badges ---- */
.sb .sb-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  line-height: 22px;
  font-size: 11.5px;
}

.sb .sb-badge--alert { background: var(--sb-alert); color: #fff; }
.sb .sb-badge--warn  { background: var(--sb-warn); color: var(--sb-warn-ink); }
.sb .sb-badge--info  { background: var(--sb-badge-bg); color: var(--sb-badge-text); }

/* ---- Account row ---- */
.sb .sb-foot {
  padding: 10px 12px;
}

.sb .sb-user {
  height: 52px;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  transition: background-color .18s ease;
}

.sb .sb-user:hover,
.sb .sb-user.is-open {
  background: var(--sb-hover-tint);
  box-shadow: none;
}

.sb .sb-avatar {
  background: var(--sb-primary);
  box-shadow: none;
}

html[data-theme="dark"] .sb .sb-avatar {
  color: #171717;
}

.sb .sb-who small {
  display: block;
  padding: 0;
  background: none;
  color: var(--sb-label);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.sb .sb-menu .sb-ico {
  width: 18px;
  height: 18px;
  color: var(--sb-icon);
}

.sb .sb-menu .sb-out .sb-ico {
  color: var(--sb-danger);
}

/* ---- Short screens ---- */
@media (max-height: 680px) {
  .sb .sb-brand { padding: 12px 16px 10px; }
  .sb .sb-logo { height: 38px; }
  .sb .sb-link { min-height: 36px; }
  .sb .sb-list { gap: 2px; }
  .sb .sb-group + .sb-group { margin-top: 14px; }
  .sb .sb-search input { height: 36px; }
}

@media (max-height: 560px) {
  .sb .sb-logo { height: 32px; }
  .sb .sb-link { min-height: 33px; }
}

/* ---- Touch / phones ---- */
@media (pointer: coarse), (max-width: 768px) {
  .sb .sb-link { min-height: 46px; }
  .sb .sb-search input { height: 44px; padding-right: 14px; }
  .sb .sb-kbd { display: none; }
}

/* ---- Collapsed icon rail (60px): icons stay centred ---- */
@media (min-width: 769px) {
  html.sb-collapsed .sb .sb-nav { padding-left: 8px; padding-right: 8px; }
  html.sb-collapsed .sb .sb-search { margin-left: 8px; margin-right: 8px; }
  html.sb-collapsed .sb .sb-foot { padding-left: 8px; padding-right: 8px; }
  html.sb-collapsed .sb .sb-link { padding: 0 12px; }
  html.sb-collapsed .sb .sb-link.is-active { box-shadow: inset 3px 0 0 var(--sb-primary); }
  html.sb-collapsed .sb .sb-group + .sb-group { margin-top: 14px; }
  html.sb-collapsed .sb .sb-badge {
    top: 2px;
    left: 26px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    line-height: 16px;
    font-size: 10px;
  }
  html.sb-collapsed .sb .sb-kbd { display: none; }
  html.sb-collapsed .sb .sb-search input { padding: 0; }
  html.sb-collapsed .sb .sb-search .sb-ico { left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb .sb-link,
  .sb .sb-link .sb-ico,
  .sb .sb-search input,
  .sb .sb-user {
    transition: none;
  }
}


/* =====================================================================
   SIDEBAR v3.1 - high visibility (light + dark)
   Higher contrast for labels, icons, borders, hover and active states,
   slightly larger text and a bolder stroke. Tweak only the variables below.
   ===================================================================== */
aside.app-sidebar.sb {
  --sb-bg: #EEEEEE;
  --sb-text: #161616;
  --sb-label: #4F4F4F;         /* section labels   (about 7:1 on the sidebar) */
  --sb-icon: #3F3F3F;          /* idle icons       (about 9:1) */
  --sb-muted: #4F4F4F;
  --sb-border: #C3C3C3;        /* dividers + search border */
  --sb-pop-border: #B1B1B1;
  --sb-primary: #4A4A4A;
  --sb-active-text: #323232;
  --sb-hover-tint: rgba(74, 74, 74, .12);
  --sb-active-tint: rgba(74, 74, 74, .20);
  --sb-badge-bg: #4A4A4A;
  --sb-alert: #C92A3A;
}

html[data-theme="dark"] aside.app-sidebar.sb {
  --sb-bg: #151515;
  --sb-text: #F5F5F5;
  --sb-label: #B7B7B7;
  --sb-icon: #D1D1D1;
  --sb-muted: #B7B7B7;
  --sb-border: #494949;
  --sb-pop-border: #5D5D5D;
  --sb-primary: #BBBBBB;
  --sb-active-text: #FFFFFF;
  --sb-hover-tint: rgba(255, 255, 255, .11);
  --sb-active-tint: rgba(161, 161, 161, .30);
  --sb-badge-bg: #868686;
  --sb-alert: #FF6B78;
}

/* text a step bigger and clearer */
.sb .sb-link {
  font-size: 15px;
  font-weight: 500;
}

.sb .sb-label {
  font-size: .78rem;
  font-weight: 700;
}

.sb .sb-who strong { font-size: 14px; }
.sb .sb-who small  { font-size: 12px; color: var(--sb-label); }

/* icons: bolder line so they read at a glance */
.sb .sb-link .sb-ico {
  stroke-width: 2;
}

.sb .sb-link:hover,
.sb .sb-link:hover .sb-ico {
  color: var(--sb-primary);
}

html[data-theme="dark"] .sb .sb-link:hover,
html[data-theme="dark"] .sb .sb-link:hover .sb-ico {
  color: #fff;
}

/* active: stronger tint, thicker accent line, outline so it is visible on any background */
.sb .sb-link.is-active,
.sb .sb-link.is-active:hover {
  box-shadow: inset 5px 0 0 var(--sb-primary), inset 0 0 0 1px var(--sb-border);
  font-weight: 700;
}

html[data-theme="dark"] .sb .sb-link.is-active,
html[data-theme="dark"] .sb .sb-link.is-active:hover {
  box-shadow: inset 5px 0 0 var(--sb-primary), inset 0 0 0 1px var(--sb-pop-border);
}

/* search + account row get a visible edge */
.sb .sb-search input {
  border-width: 1.5px;
  border-color: var(--sb-border);
  font-size: 14px;
}

.sb .sb-search input::placeholder { color: var(--sb-label); opacity: 1; }
.sb .sb-search .sb-ico { color: var(--sb-icon); }
.sb .sb-kbd { border-color: var(--sb-pop-border); color: var(--sb-label); }

.sb .sb-user {
  box-shadow: inset 0 0 0 1px var(--sb-border);
}

.sb .sb-foot {
  border-top: 1px solid var(--sb-border);
}

.sb .sb-sep { background: var(--sb-border); }

/* badges: bolder so the numbers read clearly */
.sb .sb-badge { font-weight: 800; }
.sb .sb-badge--info { background: var(--sb-badge-bg); color: #fff; }

@media (min-width: 769px) {
  html.sb-collapsed .sb .sb-link.is-active { box-shadow: inset 4px 0 0 var(--sb-primary); }
  html.sb-collapsed .sb .sb-user { box-shadow: none; }
}


/* =====================================================================
   SIDEBAR v4 - bound to the shared tokens in design-system.css
   (colours, radii and shadows now come from one place for the whole app)
   ===================================================================== */
aside.app-sidebar.sb,
html[data-theme="dark"] aside.app-sidebar.sb {
  --sb-bg: var(--sidebar-bg);
  --sb-text: var(--text);
  --sb-label: var(--text-subtle);
  --sb-icon: var(--text-subtle);
  --sb-muted: var(--text-subtle);
  --sb-border: var(--border);
  --sb-pop: var(--surface);
  --sb-pop-border: var(--border-strong);
  --sb-primary: var(--brand);
  --sb-active-text: var(--brand);
  --sb-hover-tint: var(--brand-10);
  --sb-active-tint: var(--brand-active);
  --sb-badge-bg: var(--brand-solid);
  --sb-alert: #E5484D;
  --sb-search-bg: var(--surface-2);
}

html[data-theme="dark"] aside.app-sidebar.sb {
  --sb-active-text: #FFFFFF;
}

/* panel edge: subtle right border + soft shadow so it separates from the page */
aside.app-sidebar.sb {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 14px rgba(35, 35, 35, .05);
}

html[data-theme="dark"] aside.app-sidebar.sb {
  background: var(--sidebar-bg);
  box-shadow: none;
}

/* logo: ~15% smaller than before, centred, with room to breathe */
.sb .sb-brand {
  justify-content: center;
  padding: 26px 20px 22px;
}

.sb .sb-logo {
  height: 39px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

/* search: faint gray pill, subtle border, centred icon */
.sb .sb-search input {
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  background: var(--sb-search-bg);
  color: var(--text);
}

.sb .sb-search input:focus {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

.sb .sb-search .sb-ico {
  top: 50%;
  transform: translateY(-50%);
}

/* active item: soft brand tint, bold brand text, thick brand left accent */
.sb .sb-link.is-active,
.sb .sb-link.is-active:hover {
  background: var(--sb-active-tint);
  color: var(--sb-active-text);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--brand);
}

html[data-theme="dark"] .sb .sb-link.is-active,
html[data-theme="dark"] .sb .sb-link.is-active:hover {
  box-shadow: inset 4px 0 0 var(--brand);
}

.sb .sb-link.is-active .sb-ico,
.sb .sb-link.is-active:hover .sb-ico {
  color: var(--brand);
}

.sb .sb-avatar {
  background: var(--brand-solid);
  color: #fff;
}

html[data-theme="dark"] .sb .sb-avatar {
  color: #fff;
}

@media (max-height: 680px) {
  .sb .sb-brand { padding: 14px 16px 10px; }
  .sb .sb-logo { height: 32px; }
}


/* ---- landing-page look: logo sits on the same white chip as the landing header ---- */
html[data-theme="dark"] .sb .sb-logo {
  background: linear-gradient(135deg, #ffffff, #E9E9E9);
  box-shadow: 0 6px 18px rgba(133, 133, 133, .35), 0 0 0 1px rgba(255, 255, 255, .4);
}

html[data-theme="dark"] aside.app-sidebar.sb {
  border-right-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .sb .sb-link.is-active,
html[data-theme="dark"] .sb .sb-link.is-active:hover {
  box-shadow: inset 4px 0 0 #858585, inset 0 0 0 1px rgba(133, 133, 133, .35);
}