/* ================================================================
   Macondo navigation — Tabs, SidebarNav, AppHeader
   ================================================================ */

/* ---------- Tabs ---------- */
.sp-tabs { display: flex; flex-direction: column; gap: var(--space-200); }
.sp-tabs__list { display: inline-flex; width: fit-content; align-items: center; justify-content: center; gap: var(--space-100); height: 2.25rem; padding: 3px; border-radius: var(--border-radius-lg); background: var(--surface-secondary); }
.sp-tabs__list--line { background: transparent; border-radius: 0; padding: 0; }

.sp-tab {
  position: relative;
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--space-150);
  height: calc(100% - 1px);
  padding: var(--space-100) var(--space-200);
  border: 1px solid transparent;
  border-radius: var(--border-radius-200);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--callout-font-size);
  line-height: var(--callout-line-height);
  font-weight: var(--font-weight-medium);
  color: color-mix(in srgb, var(--typography-primary) 60%, transparent);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.sp-tab:hover { color: var(--typography-primary); }
.sp-tab[data-active="true"] { background: var(--background); color: var(--typography-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.sp-tabs__list--line .sp-tab { background: transparent; box-shadow: none; }
.sp-tabs__list--line .sp-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--typography-primary); opacity: 0; transition: opacity 0.15s ease; }
.sp-tabs__list--line .sp-tab[data-active="true"]::after { opacity: 1; }

/* ---------- Sidebar ---------- */
.sp-sidebar {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  flex-shrink: 0;
  box-sizing: border-box;
  padding: var(--space-600);
  gap: var(--space-800);
  background: var(--background);
  border-right: 1px solid var(--border-primary);
  overflow-y: auto;
  font-family: var(--font-sans);
}
.sp-sidebar__group { display: flex; flex-direction: column; min-width: 0; }
.sp-sidebar__group-label {
  display: flex;
  align-items: center;
  height: var(--space-800);
  padding: 0 var(--space-300);
  font-size: var(--caption-font-size);
  line-height: var(--caption-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--typography-tertiary);
}
.sp-sidebar__group-label i { margin-left: auto; font-size: 14px; }
.sp-sidebar__menu { display: flex; flex-direction: column; gap: var(--space-100); margin: 0; padding: 0; list-style: none; }
.sp-sidebar__item { position: relative; padding: 0 var(--space-200); }
.sp-sidebar__btn {
  display: flex;
  width: 100%;
  height: var(--space-800);
  align-items: center;
  gap: var(--space-200);
  overflow: hidden;
  padding: var(--space-200);
  box-sizing: border-box;
  border: none;
  border-radius: var(--border-radius-200);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--callout-font-size);
  line-height: var(--callout-line-height);
  color: var(--typography-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.1s ease;
}
.sp-sidebar__btn:hover { background: var(--surface-hover); }
.sp-sidebar__btn[data-active="true"] { background: var(--surface-primary); }
.sp-sidebar__btn i { font-size: 16px; flex-shrink: 0; color: var(--typography-tertiary); }
.sp-sidebar__btn[data-active="true"] i { color: var(--typography-secondary); }
.sp-sidebar__btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-sidebar__footer { margin-top: auto; }

/* ---------- App header ---------- */
.sp-header {
  display: flex;
  width: 100%;
  height: var(--header-height);
  align-items: center;
  padding: var(--space-400) var(--space-600);
  box-sizing: border-box;
  background: var(--background);
}
.sp-header__group { display: flex; flex: 1; min-width: 0; align-items: center; gap: var(--space-300); }
.sp-header__group--center { justify-content: center; }
.sp-header__group--right { justify-content: flex-end; }

/* Notification bubble on header icons */
.sp-notif-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: var(--space-400);
  height: var(--space-400);
  padding: 0 var(--space-100);
  box-sizing: border-box;
  border-radius: var(--border-radius-full);
  background: var(--critical-fill);
  color: var(--typography-inverse-primary);
  font-size: 10px;
  line-height: var(--space-400);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}