/**
 * Hint Card Component
 *
 * Wiederverwendbare Hinweiskarte für Info, Warnung und Danger-Meldungen.
 * Verwendet mit: templates/components/_hint_card.html.twig
 */

/* ========================================
   BASE STYLES
   ======================================== */
.hint-card {
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
  /*DONT ADD MARGINS HERE, USE ENCAPSULATING <div class="mb-16"> ~hint-card~ </div> INSTEAD*/
}

.hint-card .hint-card-icon {
  flex-shrink: 0;
}

.hint-card-content,
.hint-card > span:not(.hint-card-icon) {
  flex: 1;
}

.hint-card-title {
  font-weight: 600;
  margin-bottom: 4px;
}

/* ========================================
   INFO VARIANT (Blue/Primary)
   ======================================== */
.hint-card--info {
  background-color: var(--primary-light, #eff6ff);
  border: 1px solid var(--primary-color, #007abb);
  color: var(--primary-color, #007abb);
}

.hint-card--info .hint-card-icon {
  color: var(--primary-color, #007abb);
}

/* ========================================
   WARNING VARIANT (Yellow/Orange)
   ======================================== */
.hint-card--warning {
  background-color: var(--warning-light, #fef3c7);
  border: 1px solid var(--warning-color, #cc7a00);
  color: var(--warning-color, #cc7a00);
}

.hint-card--warning .hint-card-icon {
  color: var(--warning-color, #cc7a00);
}

/* ========================================
   DANGER VARIANT (Red)
   ======================================== */
.hint-card--danger {
  background-color: var(--error-light, #fee2e2);
  border: 1px solid var(--error-color, #c84646);
  color: var(--error-color, #c84646);
}

.hint-card--danger .hint-card-icon {
  color: var(--error-color, #c84646);
}

/* ========================================
   SUCCESS VARIANT (Green)
   ======================================== */
.hint-card--success {
  background-color: var(--success-light, #d1fae5);
  border: 1px solid var(--success-color, #059669);
  color: var(--success-color, #059669);
}

.hint-card--success .hint-card-icon {
  color: var(--success-color, #059669);
}

/* ========================================
   SECONDARY VARIANT (Gray)
   ======================================== */
.hint-card--secondary {
  background-color: var(--grey-50, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
  color: var(--text-primary, #1e293b);
}

.hint-card--secondary .hint-card-icon {
  color: var(--text-primary, #1e293b);
}

/* ========================================
   LINK STYLES
   ======================================== */
.hint-card a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hint-card a:hover {
  text-decoration-thickness: 2px;
}

.hint-card a:visited {
  color: inherit;
}

.grid-2:has(.hint-card) {
  align-items: stretch;
}

.hint-card .btn-text:hover {
  background: none !important;
}

.hint-card--info .btn-text:hover {
  color: var(--primary-darken);
}

.hint-card--warning .btn-text:hover {
  color: var(--warning-darken);
}

.hint-card--danger .btn-text:hover {
  color: var(--error-darken);
}

.hint-card--success .btn-text:hover {
  color: var(--success-darken);
}

.hint-card--secondary .btn-text:hover {
  color: var(--grey-400);
}

/* ========================================
   UPDATE BANNER (within hint-card)
   Used by _update_available_banner.html.twig
   ======================================== */
.update-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md, 16px);
  flex: 1;
}

.update-banner-text {
  flex: 1;
  min-width: 0;
}

.update-banner-text strong {
  color: var(--text-primary, #1e293b);
}

.update-banner-description {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-secondary, #64748b);
}

.update-banner-actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--spacing-sm, 8px);
  align-items: center;
}

@media (max-width: 768px) {
  .update-banner-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .update-banner-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}