/* ===============================================================
 * 💬 MENSAGENS GLOBAIS (django.contrib.messages)
 * ---------------------------------------------------------------
 * Toast fixo no topo, usado pelas 4 áreas (Gestão, Plantonista,
 * Ensino e Coordenação) via global/partials/message.html.
 *
 * ⚠️ Escala de fonte: o FontScaler força `html { font-size }` para
 * 100% * fator (≈16px), então a escala legada `--text-*` (pensada
 * para root 10px) renderizava o texto a ~22px e o "×" a ~32px.
 * Aqui usamos SEMPRE a escala canônica `--font-size-*`.
 *
 * Mobile-first: base = telas pequenas, cresce com min-width.
 * =============================================================== */

/* ---------------------------------------------------------------
 * Container — mobile: colado nas bordas, largura fluida
 * --------------------------------------------------------------- */
#messages {
  position: fixed;
  top: 72px;                    /* header mobile: 60px (gestão) / 64px (áreas) */
  right: 0;
  left: 0;
  z-index: 9999;
  width: auto;
  max-width: none;
  max-height: calc(100vh - 88px);
  padding: 0 var(--spacing-sm);   /* recuo das bordas + folga p/ a sombra */
  overflow-y: auto;
  box-sizing: border-box;
  pointer-events: none;         /* não bloqueia cliques na área vazia */
}

/* ---------------------------------------------------------------
 * Caixa da mensagem
 * --------------------------------------------------------------- */
#messages .message {
  position: relative;
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-md) 3rem var(--spacing-md) var(--spacing-md);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-md);
  color: var(--text-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  opacity: 0.95;
  transition: opacity 0.5s ease;
  overflow-wrap: anywhere;      /* mensagens longas/URLs não estouram */
  word-break: break-word;
  pointer-events: auto;
}

/* Cores com variáveis do tema claro/escuro */
#messages .success {
  border: 1px solid var(--message-success-border);
  background-color: var(--message-success-bg);
}

#messages .error {
  border: 1px solid var(--message-error-border);
  background-color: var(--message-error-bg);
}

#messages .warning {
  border: 1px solid var(--message-warning-border);
  background-color: var(--message-warning-bg);
}

#messages .info {
  border: 1px solid var(--message-info-border);
  background-color: var(--message-info-bg);
}

/* ---------------------------------------------------------------
 * Botão de fechar — alvo de toque 44x44 no mobile
 * --------------------------------------------------------------- */
#messages .message .close-btn {
  position: absolute;
  top: 50%;
  right: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-color);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  opacity: 0.8;
  cursor: pointer;
  transform: translateY(-50%);
}

#messages .message .close-btn:hover {
  color: var(--color-confirm-btn-hover);
  opacity: 1;
}

/* Fade out (aplicado pelo message.js) */
#messages .message.message-fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;         /* não rouba clique enquanto some */
}

/* ===============================================================
 * 📱 ≥ 576px — header da Gestão passa a 70px
 * =============================================================== */
@media (min-width: 576px) {
  #messages {
    top: 78px;
    max-height: calc(100vh - 94px);
  }
}

/* ===============================================================
 * 🖥️ ≥ 768px — volta a ser um toast centralizado e estreito
 * =============================================================== */
@media (min-width: 768px) {
  #messages {
    top: 85px;
    right: auto;
    left: 50%;
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 100px);
    padding: 0 var(--spacing-md);
    transform: translateX(-50%);
  }

  #messages .message {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md) 2.75rem var(--spacing-md) var(--spacing-md);
  }

  #messages .message .close-btn {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-xl);
  }
}