/* stage-71-navigation-icon-final-polish: stable navigation icons for sidebar, add menu, and mobile dock. */

:root {
  --focus-nav-icon-shell: 38px;
  --focus-nav-icon-glyph: 19px;
  --focus-nav-icon-radius: 15px;
  --focus-nav-add-shell: 42px;
  --focus-nav-add-glyph: 20px;
  --focus-nav-mobile-shell: 34px;
  --focus-nav-mobile-glyph: 17px;
  --focus-nav-icon-ink: color-mix(in srgb, var(--text-primary, #2f2a26) 72%, var(--focus-accent-amber, #d89a3d) 10%);
  --focus-nav-icon-active-ink: color-mix(in srgb, var(--primary, #5678f5) 56%, var(--text-primary, #2f2a26) 44%);
  --focus-nav-icon-border: color-mix(in srgb, var(--surface-border, rgba(255,255,255,.22)) 80%, transparent);
  --focus-nav-icon-bg:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, #fff 36%, transparent), transparent 2.25rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 72%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 84%, transparent));
  --focus-nav-icon-hover-bg:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, #fff 40%, transparent), transparent 2.25rem),
    linear-gradient(145deg, color-mix(in srgb, var(--focus-nav-action-color, var(--primary, #5678f5)) 12%, var(--surface-elevated, rgba(255,255,255,.55))), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 82%, transparent));
  --focus-icon-panel-balanced: url("/assets/icons/sidebar-toggle.svg?v=stage71");
  --focus-icon-check-balanced: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='3.5' stroke='%23000' stroke-width='1.9'/%3E%3Cpath d='M8 12.2l2.6 2.7L16.4 9' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --focus-icon-logout-balanced: url("/assets/icons/logout-action.svg?v=stage71");
}

.side-button > .icon {
  position: relative !important;
  display: inline-grid !important;
  width: var(--focus-nav-icon-shell) !important;
  min-width: var(--focus-nav-icon-shell) !important;
  height: var(--focus-nav-icon-shell) !important;
  min-height: var(--focus-nav-icon-shell) !important;
  place-items: center !important;
  flex: 0 0 var(--focus-nav-icon-shell) !important;
  border: 1px solid var(--focus-nav-icon-border) !important;
  border-radius: var(--focus-nav-icon-radius) !important;
  background: var(--focus-nav-icon-bg) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    0 .55rem 1.25rem color-mix(in srgb, #000 7%, transparent) !important;
  color: var(--focus-nav-icon-ink) !important;
  opacity: 1 !important;
  overflow: visible !important;
  -webkit-mask: none !important;
  mask: none !important;
  transform: none !important;
}

.side-button > .icon::before {
  content: "" !important;
  display: block !important;
  width: var(--focus-nav-icon-glyph) !important;
  min-width: var(--focus-nav-icon-glyph) !important;
  height: var(--focus-nav-icon-glyph) !important;
  min-height: var(--focus-nav-icon-glyph) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  -webkit-mask: var(--focus-nav-icon-current, var(--side-icon, var(--icon-note))) center / contain no-repeat !important;
  mask: var(--focus-nav-icon-current, var(--side-icon, var(--icon-note))) center / contain no-repeat !important;
  transform: none !important;
}

.side-button > .icon::after {
  display: none !important;
}

.side-button[data-action="reminder"] > .icon {
  --focus-nav-icon-current: var(--icon-reminder);
  --focus-nav-action-color: var(--label-reminder, var(--focus-label-reminder, #5678f5));
}

.side-button[data-action="birthday"] > .icon {
  --focus-nav-icon-current: var(--icon-birthday);
  --focus-nav-action-color: var(--label-birthday, var(--focus-label-birthday, #d96b5f));
}

.side-button[data-action="schedule"] > .icon {
  --focus-nav-icon-current: var(--icon-schedule);
  --focus-nav-action-color: var(--label-study, var(--focus-label-study, #5f9073));
}

.side-button[data-action="notes"] > .icon {
  --focus-nav-icon-current: var(--icon-note);
  --focus-nav-action-color: var(--label-creative, var(--focus-label-creative, #8c7ae6));
}

.side-button[data-action="diary"] > .icon {
  --focus-nav-icon-current: var(--icon-diary);
  --focus-nav-action-color: var(--focus-accent-rose, #c96a87);
}

.side-button[data-action="settings"] > .icon {
  --focus-nav-icon-current: var(--icon-settings);
  --focus-nav-action-color: var(--focus-accent-amber, #d89a3d);
}

.side-button:is(:hover, :focus-visible, .active) > .icon {
  border-color: color-mix(in srgb, var(--focus-nav-action-color, var(--primary, #5678f5)) 34%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  background: var(--focus-nav-icon-hover-bg) !important;
  color: color-mix(in srgb, var(--focus-nav-action-color, var(--primary, #5678f5)) 62%, var(--text-primary, #2f2a26) 38%) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 .7rem 1.45rem color-mix(in srgb, var(--focus-nav-action-color, var(--primary, #5678f5)) 13%, transparent) !important;
  transform: none !important;
}

.side-button:is(:hover, :focus-visible, .active) > .icon::before {
  transform: none !important;
}

#sidebarToggle .icon.panel {
  position: relative !important;
  display: inline-grid !important;
  width: var(--focus-nav-icon-glyph) !important;
  min-width: var(--focus-nav-icon-glyph) !important;
  height: var(--focus-nav-icon-glyph) !important;
  min-height: var(--focus-nav-icon-glyph) !important;
  place-items: center !important;
  background: none !important;
  border: 0 !important;
  color: currentColor !important;
  -webkit-mask: none !important;
  mask: none !important;
}

#sidebarToggle .icon.panel::before,
.icon.panel::before {
  --focus-nav-toggle-icon: var(--focus-icon-panel-balanced);
  content: "" !important;
  display: block !important;
  width: var(--focus-nav-icon-glyph) !important;
  height: var(--focus-nav-icon-glyph) !important;
  background: currentColor !important;
  -webkit-mask: var(--focus-nav-toggle-icon) center / contain no-repeat !important;
  mask: var(--focus-nav-toggle-icon) center / contain no-repeat !important;
  border: 0 !important;
  transform: none !important;
}

#sidebarToggle .icon.panel::after,
.icon.panel::after {
  display: none !important;
}

.add-menu button[data-action="reminder"] .add-menu-icon {
  --focus-nav-add-icon-current: var(--icon-reminder);
  --focus-nav-add-color: var(--label-reminder, var(--focus-label-reminder, #5678f5));
  --focus-add-action: var(--focus-nav-add-color);
  --add-flow-action: var(--focus-nav-add-color);
}

.add-menu button[data-action="plan"] .add-menu-icon {
  --focus-nav-add-icon-current: var(--focus-icon-check-balanced);
  --focus-nav-add-color: var(--label-study, var(--focus-label-study, #5f9073));
  --focus-add-action: var(--focus-nav-add-color);
  --add-flow-action: var(--focus-nav-add-color);
}

.add-menu button[data-action="notes"] .add-menu-icon {
  --focus-nav-add-icon-current: var(--icon-note);
  --focus-nav-add-color: var(--label-creative, var(--focus-label-creative, #8c7ae6));
  --focus-add-action: var(--focus-nav-add-color);
  --add-flow-action: var(--focus-nav-add-color);
}

.add-menu button[data-action="schedule"] .add-menu-icon {
  --focus-nav-add-icon-current: var(--icon-schedule);
  --focus-nav-add-color: var(--label-study, var(--focus-label-study, #5f9073));
  --focus-add-action: var(--focus-nav-add-color);
  --add-flow-action: var(--focus-nav-add-color);
}

.add-menu-icon {
  position: relative !important;
  display: inline-grid !important;
  width: var(--focus-nav-add-shell) !important;
  min-width: var(--focus-nav-add-shell) !important;
  height: var(--focus-nav-add-shell) !important;
  min-height: var(--focus-nav-add-shell) !important;
  place-items: center !important;
  flex: 0 0 var(--focus-nav-add-shell) !important;
  border-radius: var(--focus-nav-icon-radius) !important;
  border: 1px solid color-mix(in srgb, var(--focus-nav-add-color, var(--primary, #5678f5)) 18%, var(--surface-border, rgba(255,255,255,.22))) !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, #fff 38%, transparent), transparent 2.15rem),
    linear-gradient(145deg, color-mix(in srgb, var(--focus-nav-add-color, var(--primary, #5678f5)) 12%, var(--surface-elevated, rgba(255,255,255,.55))), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 80%, transparent)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent) !important;
  color: color-mix(in srgb, var(--focus-nav-add-color, var(--primary, #5678f5)) 60%, var(--text-primary, #2f2a26) 40%) !important;
  overflow: visible !important;
  -webkit-mask: none !important;
  mask: none !important;
  transform: none !important;
}

.add-menu-icon::before {
  content: "" !important;
  display: block !important;
  width: var(--focus-nav-add-glyph) !important;
  min-width: var(--focus-nav-add-glyph) !important;
  height: var(--focus-nav-add-glyph) !important;
  min-height: var(--focus-nav-add-glyph) !important;
  inset: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  -webkit-mask: var(--focus-nav-add-icon-current, var(--add-flow-icon, var(--icon-plus))) center / contain no-repeat !important;
  mask: var(--focus-nav-add-icon-current, var(--add-flow-icon, var(--icon-plus))) center / contain no-repeat !important;
  transform: none !important;
}

.add-menu-icon::after {
  display: none !important;
}

.icon.check::before {
  --focus-nav-add-icon-current: var(--focus-icon-check-balanced);
}

.add-menu button:is(:hover, :focus-visible) .add-menu-icon {
  border-color: color-mix(in srgb, var(--focus-nav-add-color, var(--primary, #5678f5)) 34%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 .7rem 1.45rem color-mix(in srgb, var(--focus-nav-add-color, var(--primary, #5678f5)) 12%, transparent) !important;
  transform: none !important;
}

.add-menu button:is(:hover, :focus-visible) .add-menu-icon::before {
  transform: none !important;
}

.desktop-logout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
}

.desktop-logout::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  -webkit-mask: var(--focus-icon-logout-balanced) center / contain no-repeat !important;
  mask: var(--focus-icon-logout-balanced) center / contain no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (min-width: 761px) and (max-width: 1080px) {
  .side-button > .icon,
  .app-shell.sidebar-collapsed .side-button > .icon {
    width: var(--focus-nav-icon-shell) !important;
    min-width: var(--focus-nav-icon-shell) !important;
    height: var(--focus-nav-icon-shell) !important;
    min-height: var(--focus-nav-icon-shell) !important;
    flex-basis: var(--focus-nav-icon-shell) !important;
  }

  .side-button > .icon::before,
  .app-shell.sidebar-collapsed .side-button > .icon::before {
    width: var(--focus-nav-icon-glyph) !important;
    height: var(--focus-nav-icon-glyph) !important;
  }

  .desktop-logout,
  .app-shell.sidebar-collapsed .desktop-logout {
    width: var(--focus-nav-icon-shell) !important;
    height: var(--focus-nav-icon-shell) !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
}

@media (max-width: 760px) {
  .side-actions .side-button,
  .app-shell.sidebar-collapsed .side-actions .side-button {
    min-width: 0 !important;
    min-height: 34px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 4px 2px !important;
  }

  .side-actions .side-button > .icon,
  .app-shell.sidebar-collapsed .side-actions .side-button > .icon {
    width: var(--focus-nav-mobile-shell) !important;
    min-width: var(--focus-nav-mobile-shell) !important;
    height: var(--focus-nav-mobile-shell) !important;
    min-height: var(--focus-nav-mobile-shell) !important;
    flex-basis: var(--focus-nav-mobile-shell) !important;
    border-radius: 13px !important;
  }

  .side-actions .side-button > .icon::before,
  .app-shell.sidebar-collapsed .side-actions .side-button > .icon::before {
    width: var(--focus-nav-mobile-glyph) !important;
    min-width: var(--focus-nav-mobile-glyph) !important;
    height: var(--focus-nav-mobile-glyph) !important;
    min-height: var(--focus-nav-mobile-glyph) !important;
  }

  .add-menu-icon {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .add-menu-icon::before {
    width: 19px !important;
    height: 19px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-button,
  .side-button > .icon,
  .side-button > .icon::before,
  #sidebarToggle .icon.panel,
  #sidebarToggle .icon.panel::before,
  .add-menu-icon,
  .add-menu-icon::before,
  .desktop-logout::before {
    transition: none !important;
    transform: none !important;
  }
}