/* =========================================================
   Feedback
   ========================================================= */

.messages {
  margin-bottom: var(--space-4);

  display: grid;

  gap: var(--space-2);
}

.message {
  padding:
    var(--space-3)
    var(--space-4);

  border:
    1px solid
    #cce2d4;

  border-radius: var(--radius-md);

  color: var(--success-700);

  background: var(--success-100);
}

.message.error {
  color: var(--danger-700);

  background: var(--danger-100);

  border-color: #efcbc7;
}


/* ---------------------------------------------------------
   Estado vazio
   --------------------------------------------------------- */

.empty-state {
  min-height: 120px;

  padding: var(--space-8);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  color: var(--text-secondary);

  text-align: center;
}

.empty-state b {
  color: var(--text-primary);

  font-size: var(--font-size-md);
}

.empty-state span,
.empty-state a {
  margin-top: var(--space-1);

  font-size: var(--font-size-sm);
}


/* ---------------------------------------------------------
   Atualização em tempo real
   --------------------------------------------------------- */

.live-update-notice {
  margin-bottom: var(--space-4);

  padding:
    var(--space-3)
    var(--space-4);

  border:
    1px solid
    var(--border-default);

  border-radius: var(--radius-md);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-3);

  background: var(--surface-card);

  box-shadow: var(--shadow-1);
}

.live-update-notice button {
  border: 0;

  color: var(--brand-600);

  background: transparent;

  font-weight: 750;

  cursor: pointer;
}


/* ---------------------------------------------------------
   Tooltip global
   --------------------------------------------------------- */

.app-tooltip {
  position: fixed;

  z-index: 1000;

  width: max-content;

  max-width:
    min(
      280px,
      calc(100vw - 24px)
    );

  padding:
    10px
    12px;

  border-radius: 10px;

  color: var(--text-inverse);

  background: var(--brand-900);

  box-shadow:
    0 12px 28px
    rgba(16, 42, 51, .20);

  opacity: 0;
  visibility: hidden;

  transform: translateY(3px);

  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;

  text-align: left;

  pointer-events: none;

  transition:
    opacity .15s ease,
    transform .15s ease,
    visibility .15s ease;
}

.app-tooltip.visible {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);
}

/* =========================================================
   Complementos finais de feedback
   ========================================================= */

.empty-state.compact {
  min-height: 70px;

  padding: var(--space-3);
}

.empty-state.wide {
  grid-column: 1 / -1;
}


/* ---------------------------------------------------------
   Atualização ao vivo
   --------------------------------------------------------- */

.live-update-notice {
  position: sticky;

  top:
    calc(
      var(--topbar-height)
      + 8px
    );

  z-index: 30;
}

.live-update-notice[hidden] {
  display: none;
}

.live-update-notice span {
  color: var(--brand-700);

  font-weight: 700;
}


@media (max-width: 760px) {

  .live-update-notice {
    top:
      calc(
        var(--topbar-height)
        + 2px
      );
  }

}