/* Nordae AJAX layer: toasts, progress bar, loading buttons, live-refresh flash, field feedback */
.nx-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 36px)); pointer-events: none; }
.nx-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; background: #fff; color: #1b2437; border: 1px solid #e3e8f2; border-left: 5px solid #1b4fd8; border-radius: 14px; padding: 14px 14px 14px 16px; box-shadow: 0 18px 44px rgba(10, 27, 69, .22); font: 500 .92rem/1.4 Inter, "Segoe UI", system-ui, sans-serif; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .25s, transform .25s; }
.nx-toast.in { opacity: 1; transform: none; }
.nx-toast.out { opacity: 0; transform: translateX(24px); }
.nx-toast i { margin-top: 2px; font-size: 1.05rem; }
.nx-toast span { flex: 1; word-break: break-word; }
.nx-toast button { border: 0; background: none; font-size: 1.3rem; line-height: 1; color: #8b97b3; cursor: pointer; padding: 0 2px; }
.nx-toast button:hover { color: #1b2437; }
.nx-success { border-left-color: #0e9f6e; } .nx-success i { color: #0e9f6e; }
.nx-error { border-left-color: #d92d4a; } .nx-error i { color: #d92d4a; }
.nx-warning { border-left-color: #f5b942; } .nx-warning i { color: #b7791f; }
.nx-info i { color: #1b4fd8; }

.nx-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000; background: linear-gradient(90deg, #1b4fd8, #2dd4bf); opacity: 0; transition: width .4s, opacity .3s; }
.nx-bar.on { opacity: 1; width: 82%; transition: width 8s cubic-bezier(.1, .8, .2, 1), opacity .1s; }

.nx-loading { opacity: .85; cursor: progress; }
.nx-spin { display: inline-block; width: 1em; height: 1em; margin-right: .55em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: nxspin .7s linear infinite; vertical-align: -.15em; }
@keyframes nxspin { to { transform: rotate(360deg); } }
form.nx-busy { opacity: .92; }

.nx-flash { animation: nxflash .9s ease; }
@keyframes nxflash { 0% { background-color: rgba(45, 212, 191, .28); } 100% { background-color: transparent; } }

/* inline field feedback (works with crispy bootstrap4 markup) */
.is-invalid { border-color: #d92d4a !important; box-shadow: 0 0 0 3px rgba(217, 45, 74, .12) !important; }
.invalid-feedback { display: block; color: #d92d4a; font-size: .82rem; margin-top: 4px; font-weight: 600; }
.nx-hint { font-size: .8rem; margin-top: 6px; font-weight: 600; }
.nx-hint.bad { color: #d92d4a; } .nx-hint.ok { color: #0e9f6e; } .nx-hint.muted { color: #6b7690; font-weight: 500; }

/* gentle page-in so navigation feels fluid */
.app-content { animation: nxin .28s ease both; }
@keyframes nxin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app-content, .nx-toast, .nx-flash { animation: none; transition: none; } }
