/*
 * 全站统一的浮动提示（右上角）：前台、后台、登录 / 改密码页共用。
 * 由 static/js/site_dialogs.js 生成（showToast），服务器提示由 templates/_flash_toasts.html 输出同样的结构。
 * 颜色、字号、圆角只用 templates/_design_tokens.html 的变量，深浅色自动跟随。
 */

/* 提示区：顶栏下面靠右；这一列里有按钮、输入框会被挡住时由脚本往下挪（--toast-top），如标题行的“新增”、工具条的“保存” */
.site-toast-container {
  position: fixed;
  top: calc(var(--toast-top, var(--header-h)) + var(--space-md));
  right: var(--space-lg);
  /* 在“补充资料”遮罩（1250）之上、确认框（1300）之下 */
  z-index: 1280;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: min(360px, calc(100vw - 2 * var(--space-lg)));
  max-height: calc(100vh - var(--toast-top, var(--header-h)) - 2 * var(--space-md));
  max-height: calc(100dvh - var(--toast-top, var(--header-h)) - 2 * var(--space-md));
  pointer-events: none;
}

/* 提示多到一屏放不下：提示区自己上下滚动（脚本按实际高度加上这个标记） */
.site-toast-container.is-scrollable { overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; }

.site-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0;
  padding: 10px 8px 10px 12px;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  flex: none;
  font-size: var(--font-sm);
  line-height: 1.5;
  text-align: left;
  pointer-events: auto;
  animation: toast-in var(--transition-base) ease-out;
}

/* 错误、警告带一层淡底色，和普通说明一眼分开 */
.site-toast.toast-error { border-left-color: var(--color-red); background-image: linear-gradient(var(--red-soft), var(--red-soft)); }
.site-toast.toast-warning { border-left-color: var(--color-gold); background-image: linear-gradient(var(--gold-soft), var(--gold-soft)); }
.site-toast.toast-success { border-left-color: var(--color-green); }
.site-toast.toast-info { border-left-color: var(--accent); }

.site-toast-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.toast-error .site-toast-icon { color: var(--color-red); }
.toast-warning .site-toast-icon { color: var(--color-gold); }
.toast-success .site-toast-icon { color: var(--color-green); }

.site-toast-svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-toast-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; }

/* 长文字完整显示：自动折行，特别长时在提示里面上下滚动 */
.site-toast-msg {
  max-height: min(40vh, 240px);
  overflow-y: auto;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.site-toast-actions { display: flex; flex-wrap: wrap; gap: 4px 6px; }

.site-toast-action {
  max-width: 100%;
  min-height: 24px;
  padding: 2px 8px;
  color: var(--text-link);
  background: var(--surface-soft);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--font-xs);
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.site-toast-action:hover { color: var(--accent); border-color: var(--accent); }

.site-toast-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px 0 0;
  padding: 5px;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.site-toast-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.site-toast-action:focus-visible, .site-toast-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.site-toast.toast-out { animation: toast-out var(--transition-base) ease-in forwards; }

@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px); } }

/* 读屏播报区：看不见，只给读屏软件读 */
.site-toast-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 字段红色标记（和提示配套）：校验没通过的输入框 */
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--color-red); }

/* 手机：左右各留一点边，整行宽，不会超出屏幕 */
@media (max-width: 760px) {
  .site-toast-container { right: var(--space-md); left: var(--space-md); width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .site-toast, .site-toast.toast-out { animation-duration: .01s; }
}

@media print {
  .site-toast-container { display: none; }
}