/*
 * GO! Component Styles (global)
 * Styles for components that require global CSS because JS toggles classes
 * outside Blazor's scoped CSS scope, or because they use keyframe animations.
 * Requires go-design-tokens.css to be loaded first.
 */

/* ==========================================================================
   GO! Toast / Snackbar
   ========================================================================== */

.go-toast-container {
  position: fixed;
  top: var(--go-space-6);
  right: var(--go-space-6);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--go-space-2);
  max-width: 380px;
}

.go-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--go-radius-sm);
  border-left: 4px solid transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  animation: go-toast-in 0.3s ease-out;
  font-family: var(--go-font-family);
}

.go-toast--success {
  background: #f0f7f0;
  border-left-color: #198754;
  color: #155724;
}

.go-toast--error {
  background: #fdf0f0;
  border-left-color: #dc3545;
  color: #842029;
}

.go-toast--info {
  background: #e8f4fd;
  border-left-color: #0d6efd;
  color: #084298;
}

.go-toast--warning {
  background: #fff8e6;
  border-left-color: #e6a817;
  color: #8a6d11;
}

.go-toast__icon {
  flex-shrink: 0;
  margin-top: 1px;
}

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

.go-toast__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.go-toast__message {
  font-size: 13px;
  line-height: 1.4;
}

.go-toast--fade-out {
  animation: go-toast-out 0.3s ease-in forwards;
}

.go-toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-top: 2px;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.go-toast__close:hover {
  opacity: 1;
}

@keyframes go-toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes go-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}

/* ==========================================================================
   GO! Banner — Persistent inline notification
   ========================================================================== */

.go-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--go-radius-sm);
  border: 1px solid transparent;
  font-family: var(--go-font-family);
}

.go-banner--success {
  background: #f0f7f0;
  border-color: #c3e6cb;
  color: #155724;
}

.go-banner--info {
  background: #e8f4fd;
  border-color: #b6d4fe;
  color: #084298;
}

.go-banner--warning {
  background: #fff8e6;
  border-color: #ffe69c;
  color: #8a6d11;
}

.go-banner--error {
  background: #fdf0f0;
  border-color: #f5c2c7;
  color: #842029;
}

.go-banner__icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.go-banner__message {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  min-width: 0;
}

.go-banner__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-top: 3px;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.go-banner__close:hover {
  opacity: 1;
}

/* ==========================================================================
   GO! Breadcrumb
   ========================================================================== */

.go-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: calc(-1 * var(--go-space-2)) 0 var(--go-space-3) 0;
  font-size: var(--go-font-size-sm);
}

.go-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: var(--go-text-secondary);
}

.go-breadcrumb__item + .go-breadcrumb__item::before {
  content: "\203A";
  margin: 0 var(--go-space-2);
  color: var(--go-text-disabled);
}

.go-breadcrumb__item a {
  color: var(--go-magenta);
  text-decoration: none;
}

.go-breadcrumb__item a:hover {
  text-decoration: underline;
}

.go-breadcrumb__item--active {
  color: var(--go-text-dark);
  font-weight: 500;
}

/* ==========================================================================
   GO! Header nav dropdowns (global — JS toggles classes outside Blazor scope)
   ========================================================================== */

.go-header__nav-dropdown {
  position: relative;
}

.go-header__nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--go-background);
  border-radius: var(--go-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 200;
  padding: var(--go-space-2) 0;
}

.go-header__nav-dropdown--open > .go-header__nav-dropdown-menu {
  display: block;
}

.go-header__nav-dropdown-item {
  display: block;
  padding: var(--go-space-2) var(--go-space-4);
  font-size: 15px;
  color: var(--go-text-dark);
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}

.go-header__nav-dropdown-item:hover {
  background-color: var(--go-surface-alt);
  color: var(--go-magenta);
  text-decoration: none;
}

/* Auth dropdown — must also be global for JS toggle */
.go-header__auth-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 240px;
  background: #FFFFFF;
  border: 1px solid #C7C7C7;
  border-radius: 4px;
  z-index: 200;
  padding: 8px;
}

.go-header__auth-dropdown--open {
  display: block;
}

.go-header__auth-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: var(--go-font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #303030;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
  gap: 6px;
  cursor: pointer;
}

.go-header__auth-dropdown-item:hover,
.go-header__auth-dropdown-item:focus {
  background-color: hsl(0deg 6% 97%);
  color: #303030;
  text-decoration: none;
}

/* Dropdown item text — animated underline (like pro.g-o.be)
   Uses em-based Y position instead of 100% to avoid sub-pixel rendering
   differences between <a> and <button> flex items (block vs inline height). */
.go-header__auth-dropdown-text {
  background: linear-gradient(currentcolor, currentcolor) 0px 1.15em / 0px 1px no-repeat;
  transition: background-size 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.go-header__auth-dropdown-item:hover .go-header__auth-dropdown-text {
  background-size: 100% 1px;
}

.go-header__auth-dropdown-item .c-icon {
  flex-shrink: 0;
}

.go-header__auth-dropdown form {
  margin: 0;
  padding: 0;
}

button.go-header__auth-dropdown-item {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}