/* app-header — modern top toolbar with unified color scheme */

.app-header-root {
  background: var(--background-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}

.app-header-toolbar {
  padding-top: var(--spacing-sm) !important;
  padding-bottom: var(--spacing-sm) !important;
  min-height: 56px !important;
}

.app-header-title {
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--primary-dark) !important;
  max-width: 220px !important;
  background: linear-gradient(135deg, var(--primary-color), var(--info-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
}

.app-header-subtitle {
  font-size: 11px !important;
  color: var(--text-tertiary) !important;
  font-weight: 500;
  margin-left: var(--spacing-sm);
  background: none;
  -webkit-text-fill-color: var(--text-tertiary);
}

.app-header-menu-btn {
  color: var(--text-secondary) !important;
  transition: all 0.2s ease !important;
  border-radius: var(--radius-lg) !important;
}
.app-header-menu-btn:hover {
  background-color: var(--hover-bg) !important;
  color: var(--primary-color) !important;
  transform: scale(1.05);
}

.app-header-highlight-btn {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--warning-color) !important;
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: var(--warning-color) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  transition: all 0.2s ease !important;
}
.app-header-highlight-btn:hover {
  background-color: rgba(245, 158, 11, 0.2) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.app-header-notification-btn {
  color: var(--text-secondary) !important;
  border-radius: var(--radius-lg) !important;
  transition: all 0.2s ease !important;
}
.app-header-notification-btn:hover {
  background-color: var(--hover-bg) !important;
  color: var(--primary-color) !important;
}

.app-header-avatar {
  border: 2px solid var(--background-primary) !important;
  box-shadow: 0 0 0 2px var(--primary-light) !important;
  transition: all 0.3s ease !important;
  border-radius: var(--radius-rounded) !important;
}
.app-header-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 2px var(--primary-color), var(--shadow-md) !important;
}

.app-header-separator {
  background-color: var(--border-color) !important;
  margin-left: var(--spacing-md) !important;
  margin-right: var(--spacing-md) !important;
}

/* Badge for notification count */
.app-header-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  background-color: var(--danger-color) !important;
  color: var(--text-white) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: var(--radius-rounded) !important;
  border: 2px solid var(--background-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mobile optimizations */
@media (max-width: 599px) {
  .app-header-toolbar {
    min-height: 52px !important;
    padding-left: var(--spacing-sm) !important;
    padding-right: var(--spacing-sm) !important;
  }
  
  .app-header-title {
    font-size: 16px !important;
    max-width: 160px !important;
  }
  
  .app-header-separator {
    display: none !important;
  }
}

/* Animation for highlight button appearance */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.app-header-highlight-btn-enter-active {
  animation: slideInRight 0.3s ease-out;
}