/* ============================================================
   ui-dialogs.css — shared toast + dialog system (ttToast, ttError,
   ttConfirm, ttPrompt, ttCopyLink). Loaded globally from base.html.
   Sits above every page-local overlay (logistics modals peak at 10001).
   ============================================================ */

/* ---------- Toasts ---------- */
#tt-toasts {
  position: fixed;
  bottom: 16px; right: 16px;
  z-index: 11500;
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}
.tt-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--panel-raised, #1e293b);
  color: var(--glass-text, #e2e8f0);
  border: 1px solid var(--glass-line-strong, rgba(148,163,184,0.35));
  border-left: 3px solid var(--glass-text, #e2e8f0);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--shadow-1, 0 6px 18px rgba(0,0,0,.25));
  padding: 10px 12px 10px 14px;
  font-size: 13px; line-height: 1.45;
  max-width: 380px; min-width: 220px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.tt-toast.tt-in { opacity: 1; transform: translateY(0); }
.tt-toast.tt-out { opacity: 0; transform: translateY(8px); }
.tt-toast--ok   { border-left-color: var(--ok, #22c55e); }
.tt-toast--warn { border-left-color: var(--warn, #f59e0b); }
.tt-toast--info { border-left-color: var(--brand, #2563eb); }
.tt-toast__icon { flex: 0 0 auto; margin-top: 1px; font-size: 14px; }
.tt-toast--ok   .tt-toast__icon { color: var(--ok, #22c55e); }
.tt-toast--warn .tt-toast__icon { color: var(--warn, #f59e0b); }
.tt-toast--info .tt-toast__icon { color: var(--brand-light, #93c5fd); }
.tt-toast__msg { white-space: pre-line; word-break: break-word; }
.tt-toast__close {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  color: var(--glass-muted, #94a3b8); font-size: 14px; line-height: 1;
  padding: 2px; margin-left: 2px;
}
.tt-toast__close:hover { color: var(--glass-text, #e2e8f0); }

@media (max-width: 640px) {
  #tt-toasts {
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    align-items: stretch;
  }
  .tt-toast { max-width: none; }
}

/* ---------- Dialog (modal) ---------- */
.tt-dialog-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 11000;
  display: flex; align-items: center; justify-content: center;
}
/* display:flex beats the hidden attribute — must force it off */
.tt-dialog-backdrop[hidden] { display: none !important; }

.tt-dialog {
  background: var(--panel-raised, #1e293b);
  border: 1px solid var(--glass-line-strong, rgba(148,163,184,0.35));
  border-radius: 12px;
  padding: 24px;
  max-width: 400px; width: calc(100vw - 32px);
  color: var(--glass-text, #e2e8f0);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.tt-dialog--danger { border-color: rgba(239,68,68,0.35); }

.tt-dialog__title {
  margin: 0 0 10px 0;
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  color: var(--glass-text, #e2e8f0);
}
.tt-dialog__title .fa-solid { font-size: 15px; }
.tt-dialog--error  .tt-dialog__title { color: var(--bad, #ef4444); }
.tt-dialog--danger .tt-dialog__title { color: var(--bad, #ef4444); }

.tt-dialog__msg {
  margin: 0;
  font-size: 13px; line-height: 1.5;
  color: var(--glass-text-soft, #cbd5e1);
  white-space: pre-line; word-break: break-word;
}

.tt-dialog__input {
  width: 100%; box-sizing: border-box;
  margin-top: 12px;
  background: var(--bg-input, #0d121a);
  color: var(--text, #e5e7eb);
  border: 1px solid var(--line-strong, #334155);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}
.tt-dialog__input:focus { outline: none; border-color: var(--brand, #2563eb); }

.tt-dialog__copyrow { display: flex; gap: 8px; margin-top: 12px; }
/* display:flex beats the hidden attribute — must force it off */
.tt-dialog__copyrow[hidden] { display: none !important; }
.tt-dialog__copyrow .tt-dialog__input { margin-top: 0; flex: 1; }

.tt-dialog__btns {
  display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end;
}
.tt-dialog__btn {
  border: none; cursor: pointer;
  padding: 8px 18px; border-radius: 8px;
  font-size: 13px; font-family: inherit;
}
.tt-dialog__btn--cancel {
  background: var(--glass, rgba(15,20,29,0.92)); color: var(--glass-text, #e2e8f0);
  border: 1px solid var(--glass-line-strong, rgba(148,163,184,0.35));
}
.tt-dialog__btn--cancel:hover { background: var(--glass-hover, rgba(148,163,184,0.15)); }
.tt-dialog__btn--ok {
  background: var(--brand, #2563eb); color: #fff; font-weight: 600;
}
.tt-dialog__btn--ok:hover { background: var(--brand-600, #1d4ed8); }
.tt-dialog__btn--danger {
  background: #dc2626; color: #fff; font-weight: 600;
}
.tt-dialog__btn--danger:hover { background: #ef4444; }
.tt-dialog__btn:focus-visible { outline: 2px solid var(--brand-light, #93c5fd); outline-offset: 1px; }