/* aunoo design system reskin for the Jinja pages (AuNooAI/aunoo-design).
   Load after aunoo-tokens.css, aunoo-theme.css and each page's inline styles:
   it points the existing --colors-* scales at the design palette, switches the
   font to Geist, and restyles the shared sidebar layout (base_with_shared_nav.html)
   to match the React pages (ui/src/styles/aunoo-shell.css). */

:root {
  /* Pink accent, rebuilt on the design accent #D84898. Step 8 is the primary,
     as it was in aunoo-theme.css. */
  --colors-pink-1: #fcf2f8;
  --colors-pink-2: #fbedf5;
  --colors-pink-3: #f9e4f0;
  --colors-pink-4: #f6d7e8;
  --colors-pink-5: #f3c8e0;
  --colors-pink-6: #eca4cc;
  --colors-pink-7: #e276b2;
  --colors-pink-8: #d84898;
  --colors-pink-9: #c93d8a;
  --colors-pink-10: #b8357d;
  --colors-pink-11: #a62d73;
  --colors-pink-12: #651249;

  --colors-pink-alpha-1: rgba(216, 72, 152, 0.04);
  --colors-pink-alpha-2: rgba(216, 72, 152, 0.07);
  --colors-pink-alpha-3: rgba(216, 72, 152, 0.10);
  --colors-pink-alpha-4: rgba(216, 72, 152, 0.15);
  --colors-pink-alpha-5: rgba(216, 72, 152, 0.24);
  --colors-pink-alpha-6: rgba(216, 72, 152, 0.30);
  --colors-pink-alpha-7: rgba(216, 72, 152, 0.44);
  --colors-pink-alpha-8: rgba(216, 72, 152, 0.56);
  --colors-pink-alpha-9: rgba(216, 72, 152, 0.68);
  --colors-pink-alpha-10: rgba(216, 72, 152, 0.80);
  --colors-pink-alpha-11: rgba(216, 72, 152, 0.92);
  --colors-pink-alpha-12: rgba(216, 72, 152, 0.96);

  --colors-accent-alpha-10: rgba(216, 72, 152, 0.10);
  --colors-accent-alpha-20: rgba(216, 72, 152, 0.20);
  --colors-accent-alpha-30: rgba(216, 72, 152, 0.30);
  --colors-accent-alpha-50: rgba(216, 72, 152, 0.50);

  /* Neutrals from the design tokens: card-light, area-bg, sidebar-border,
     area-outer, text-muted, text-secondary and text-primary */
  --colors-slate-1: #fbfbfd;
  --colors-slate-2: #f4f5f9;
  --colors-slate-3: #ecedf3;
  --colors-slate-4: #e0e1e9;
  --colors-slate-5: #d8d9e0;
  --colors-slate-6: #c8c6d0;
  --colors-slate-7: #b5b6bf;
  --colors-slate-8: #7b7c86;
  --colors-slate-9: #65636d;
  --colors-slate-10: #3d3a4a;
  --colors-slate-11: #1a1a2e;
  --colors-slate-12: #121220;

  --font-family: var(--font-sans);
  --font-family-code: var(--font-mono);
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
}

/* Bootstrap's primary button and links follow the accent */
.btn-primary {
  --bs-btn-bg: var(--accent-strong);
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--text-on-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--accent-strong-hover);
  border-color: var(--accent-strong-hover);
  color: var(--text-on-accent);
}

.btn-outline-primary {
  border-color: var(--accent-strong);
  color: var(--pink-ink);
}

.btn-outline-primary:hover {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--text-on-accent);
}

/* ================= Shared sidebar layout (base_with_shared_nav.html) ================= */

.shared-nav-layout {
  height: 100dvh;
  background: var(--nav-bg);
}

.shared-nav-sidebar {
  width: var(--sidebar-w);
  padding: 0 var(--area-gap) var(--area-gap) var(--md);
  border-right: none;
  background-color: var(--nav-bg);
  box-shadow: none;
  font-family: var(--font-sans);
  scrollbar-width: thin;
  scrollbar-color: var(--separator-dark) transparent;
}

.shared-nav-header {
  display: flex;
  align-items: center;
  min-height: var(--topnav-h);
  padding: 0 var(--md);
  border-bottom: none;
}

.shared-nav-logo {
  display: inline-flex;
  margin: 0;
}

.shared-nav-logo svg {
  display: block;
  width: calc(var(--logo-h) * 176 / 24);
  height: var(--logo-h);
}

.shared-nav-logo .logo-word { fill: var(--logo-word); }
.shared-nav-logo .logo-dot { fill: var(--logo-dot); }
.shared-nav-logo .logo-badge { fill: var(--logo-badge-bg); }
.shared-nav-logo .logo-badge-text { fill: var(--logo-badge-text); }

.shared-nav-menu {
  padding: var(--sm) 0 0;
}

.nav-section-label {
  margin-top: var(--space-section);
  padding: 0 var(--md) var(--sm);
  font-size: var(--type-group-label-size);
  font-weight: var(--type-group-label-weight);
  letter-spacing: var(--tracking-group-label);
  color: var(--text-on-dark);
}

.nav-section-label:first-child {
  margin-top: 0;
}

.shared-nav-list {
  gap: var(--gap-meta);
}

.shared-nav-link,
.nav-submenu-link {
  gap: var(--gap-cozy);
  height: var(--nav-item-h);
  padding: 0 var(--md);
  border-radius: var(--r-lg);
  font-size: var(--type-nav-item-size);
  font-weight: var(--type-nav-item-weight);
  color: var(--text-on-dark);
  transition:
    background var(--dur-hover) var(--ease),
    color var(--dur-hover) var(--ease);
}

.nav-submenu {
  display: flex;
  flex-direction: column;
  gap: var(--gap-meta);
}

.nav-submenu.open {
  padding-top: var(--gap-meta);
}

.nav-submenu-link {
  padding-left: calc(var(--md) + var(--icon-md) + var(--gap-cozy));
}

.shared-nav-link i:first-child {
  width: var(--icon-md);
  font-size: var(--fs-14);
}

.nav-submenu-link i {
  width: var(--icon-sm);
  font-size: var(--fs-13);
}

.shared-nav-link:hover,
.nav-submenu-link:hover,
.shared-nav-link.shared-nav-active,
.nav-submenu-link.active {
  background-color: var(--accent-tint-30);
  color: var(--accent-text-active);
  font-weight: var(--type-nav-item-weight);
}

.shared-nav-link:focus-visible,
.nav-submenu-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.nav-chevron {
  opacity: var(--opacity-caret);
  transform: rotate(var(--rotate-collapsed));
}

.shared-nav-link.open .nav-chevron {
  transform: none;
}

.shared-nav-footer {
  margin-top: var(--space-section);
  padding: var(--md) var(--md) 0;
  border-top: var(--hairline) solid var(--separator-dark);
  background-color: transparent;
}

.user-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  background-color: var(--accent-tint-30);
  color: var(--accent-text-active);
  font-size: var(--fs-12);
}

.user-name {
  font-size: var(--type-member-name-size);
  color: var(--logo-word);
}

.user-email {
  font-size: var(--type-timestamp-size);
  color: var(--text-on-dark);
}

.logout-link {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  border-radius: var(--r-md);
  background: var(--chip-dark);
  color: var(--text-on-dark);
}

.logout-link:hover {
  background-color: var(--chip-dark-hover);
  color: var(--accent-text-active);
}

/* The page sits on a rounded light panel inside the dark frame */
.shared-nav-content {
  margin: var(--area-gap) var(--area-gap) var(--area-gap) 0;
  border-radius: var(--r-area);
  background-color: var(--area-bg);
  color: var(--text-primary);
}

@media print {
  .shared-nav-sidebar { display: none; }
  .shared-nav-layout { height: auto; background: none; }
  .shared-nav-content { margin: 0; border-radius: 0; overflow: visible; }
}