/* Modern Toast / Notification System (Accessible, Responsive)
   -----------------------------------------------------------
   Classes principais:
   .mn-container[data-position]  => wrapper por posição
   .mn-toast                     => item/base
   .mn-toast[data-type="success"|error|warning|info]
*/
:root {
  --mn-font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Open Sans",sans-serif;
  --mn-radius: 8px;
  --mn-shadow: 0 2px 8px rgba(0,0,0,.25);
  --mn-color-bg: #212830; /* sólido simples */
  --mn-border: 1px solid #2d3641;
  --mn-color: #f2f4f6;
  --mn-color-dim: #9aa3af;
  --mn-accent-success: #2ecc71;
  --mn-accent-error: #e74c3c;
  --mn-accent-warning: #f1c40f;
  --mn-accent-info: #3498db;
  --mn-progress-height: 2px;
  --mn-z: 2147483000;
  --mn-max-width: 360px;
  --mn-gap: 10px;
  --mn-slide: 14px;
}

.mn-container {
  position: fixed;
  z-index: var(--mn-z);
  display: flex;
  flex-direction: column;
  gap: var(--mn-gap);
  max-width: calc(100vw - 32px);
  pointer-events: none; /* permite clicar atrás exceto no toast */
  padding: 12px;
  box-sizing: border-box;
}
.mn-container[data-position*="top"] { top: 0; }
.mn-container[data-position*="bottom"] { bottom: 0; }
.mn-container[data-position*="right"] { right: 0; align-items: flex-end; }
.mn-container[data-position*="left"] { left: 0; align-items: flex-start; }
.mn-container[data-position="center"] { left: 50%; top: 0; transform: translateX(-50%); }

.mn-toast {
  --mn-accent-current: var(--mn-accent-info);
  width: var(--mn-max-width);
  max-width: 100%;
  background: var(--mn-color-bg);
  border: var(--mn-border);
  border-left: 4px solid var(--mn-accent-current); /* simples indicador */
  border-radius: var(--mn-radius);
  color: var(--mn-color);
  font: 500 13.5px/1.4 var(--mn-font-family);
  position: relative;
  padding: 10px 12px 10px 42px;
  box-shadow: var(--mn-shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(var(--mn-slide));
  animation: mn-enter .32s ease-out forwards;
}
.mn-toast[data-leaving="true"] { animation: mn-exit .28s ease-in forwards; }
.mn-toast[data-type="success"] { --mn-accent-current: var(--mn-accent-success); }
.mn-toast[data-type="error"] { --mn-accent-current: var(--mn-accent-error); }
.mn-toast[data-type="warning"] { --mn-accent-current: var(--mn-accent-warning); }
.mn-toast[data-type="info"] { --mn-accent-current: var(--mn-accent-info); }

.mn-toast .mn-icon {
  position: absolute;
  top: 9px; left: 10px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--mn-accent-current);
  font-size: 15px;
  background: transparent;
  border-radius: 4px;
}
.mn-toast h4 { margin: 0; font-size: 13px; font-weight: 600; line-height:1.2; }
.mn-toast .mn-message { margin: 0; font-size: 13px; font-weight: 500; color: var(--mn-color);} 

.mn-toast button.mn-close {
  position: absolute; top:4px; right:4px;
  appearance: none; border: none; outline: none;
  background: transparent; color: #88929d; cursor: pointer;
  font-size: 16px; width: 26px; height: 26px;
  line-height: 1; display:flex; align-items:center; justify-content:center;
  border-radius: 6px; font-weight: 400;
  transition: background .15s,color .15s;
}
.mn-toast button.mn-close:hover { background:#2b343e; color:#d5d9de; }

.mn-actions { display:flex; gap:6px; margin-top:6px; }
.mn-actions button { background:#2b343e; color:#d5d9de; border:1px solid #36414d; font:500 11px var(--mn-font-family); padding:5px 10px; border-radius:6px; cursor:pointer; letter-spacing:.3px; text-transform:none; }
.mn-actions button:hover { background:#36414d; }

.mn-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0; height: var(--mn-progress-height);
  background: var(--mn-accent-current);
  transform-origin: left;
  animation: mn-progress linear forwards;
  opacity:.9;
}

@keyframes mn-enter { 0% {opacity:0; transform: translateY(var(--mn-slide));} 100% {opacity:1; transform: translateY(0);} }
@keyframes mn-exit { 0% {opacity:1; transform: translateY(0);} 100% {opacity:0; transform: translateY(var(--mn-slide));} }
@keyframes mn-progress { from { transform: scaleX(1);} to { transform: scaleX(0);} }

/* Compact em telas pequenas */
@media (max-width: 640px) {
  :root { --mn-radius: 6px; --mn-gap:8px; }
  .mn-container[data-position*="right"], .mn-container[data-position*="left"], .mn-container[data-position="center"] { left: 0; right: 0; transform:none; align-items: stretch; }
  .mn-toast { width: 100%; border-radius: 6px; }
}