/* Upgrade banners for plan limit warnings */
.upgrade-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--size-3, 0.75rem);
  padding: var(--size-3, 0.75rem) var(--size-4, 1rem);
  border-radius: var(--radius-2, 6px);
  margin-bottom: var(--size-4, 1rem);
  font-size: var(--font-size-1, 0.875rem);
  line-height: 1.5;
}

.upgrade-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.upgrade-banner__content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-2, 0.5rem) var(--size-3, 0.75rem);
}

.upgrade-banner__content .btn {
  white-space: nowrap;
}

.upgrade-banner__link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Warning variant (80%+ usage) */
.upgrade-banner--warning {
  background: var(--yellow-1, #fff9db);
  border: 1px solid var(--yellow-4, #ffd43b);
  color: var(--yellow-9, #5c4813);
}

.upgrade-banner--warning svg {
  color: var(--yellow-7, #f59f00);
}

.upgrade-banner--warning .upgrade-banner__link {
  color: var(--yellow-9, #5c4813);
}

/* Danger variant (100% / limit reached) */
.upgrade-banner--danger {
  background: var(--red-1, #fff5f5);
  border: 1px solid var(--red-4, #ff8787);
  color: var(--red-9, #c92a2a);
}

.upgrade-banner--danger svg {
  color: var(--red-7, #f03e3e);
}

/* Inline variant (smaller, for use inside account cards etc.) */
.upgrade-banner--inline {
  margin-top: var(--size-2, 0.5rem);
  margin-bottom: 0;
  padding: var(--size-2, 0.5rem) var(--size-3, 0.75rem);
  font-size: var(--font-size-0, 0.8125rem);
}

/* Nav upgrade highlight */
.nav-link--upgrade {
  color: var(--green-7, #37b24d) !important;
  font-weight: 700;
  position: relative;
}

.nav-link--upgrade::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green-7, #37b24d);
  border-radius: 1px;
}

/* Nav trial countdown */
.nav-link--trial {
  color: var(--orange-7, #e8590c) !important;
  font-weight: 700;
  font-size: 0.85em;
  position: relative;
}

.nav-link--trial::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--orange-7, #e8590c);
  border-radius: 1px;
}

/* Dark mode */
html[data-theme="dark"] .upgrade-banner--warning {
  background: rgba(255, 212, 59, 0.1);
  border-color: var(--yellow-6, #fab005);
  color: var(--yellow-3, #ffe066);
}

html[data-theme="dark"] .upgrade-banner--warning svg {
  color: var(--yellow-5, #fcc419);
}

html[data-theme="dark"] .upgrade-banner--warning .upgrade-banner__link {
  color: var(--yellow-3, #ffe066);
}

html[data-theme="dark"] .upgrade-banner--danger {
  background: rgba(255, 87, 87, 0.1);
  border-color: var(--red-6, #fa5252);
  color: var(--red-3, #ffc9c9);
}

html[data-theme="dark"] .upgrade-banner--danger svg {
  color: var(--red-5, #ff6b6b);
}

html[data-theme="dark"] .nav-link--upgrade {
  color: var(--green-5, #51cf66) !important;
}

html[data-theme="dark"] .nav-link--upgrade::after {
  background: var(--green-5, #51cf66);
}

html[data-theme="dark"] .nav-link--trial {
  color: var(--orange-5, #ff922b) !important;
}

html[data-theme="dark"] .nav-link--trial::after {
  background: var(--orange-5, #ff922b);
}