/* Galerion feedback layer (2026-10-18): ONE shared toast + inline alert + button loading state.
   JS: notifications.js (gToast / showNotification / showSuccess / showError / showInfo / showWarning / gNotice)
       g-busy.js (gBusy / withLoading + auto-wiring of fetch / XHR / form submits).
   Position rule: toasts are TOP-CENTRE (the bottom-right lane belongs to floating elements: FAB, chat, save bars).
   Palette: petrol #1F4E5F, ink #1A1A1A, bg #FAF9F7, muted semantic tints, thin accent, radius 4-6px, no gradients. */
:root {
  --gn-ok: #2E6B4E;   --gn-ok-tint: #EEF4F0;   --gn-ok-line: #CFE0D6;
  --gn-err: #A3392B;  --gn-err-tint: #F9EEEC;  --gn-err-line: #EBCFCA;
  --gn-warn: #8A5A12; --gn-warn-tint: #FAF3E5; --gn-warn-line: #EBDDBF;
  --gn-info: #1F4E5F; --gn-info-tint: #E8EEF0; --gn-info-line: #C9D7DC;
}

/* ---------- Toast stack (top-centre, top layer via popover when supported) ---------- */
.g-toasts { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 50%; right: auto; bottom: auto;
  transform: translateX(-50%); z-index: 2147483000; display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: max-content; max-width: min(440px, calc(100vw - 24px)); margin: 0; padding: 0; border: 0; background: transparent;
  overflow: visible; pointer-events: none; }
.g-toasts[popover] { inset: auto; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 50%; color: inherit; }
.g-toasts[popover]:not(:popover-open) { display: none; }
.g-toast2 { pointer-events: auto; direction: rtl; display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box;
  width: min(440px, calc(100vw - 24px)); min-height: 44px; padding: 10px 10px 10px 12px; font: 500 14px/1.45 inherit;
  font-family: inherit; color: var(--g-ink, #1A1A1A); background: #fff; border: 1px solid var(--gn-info-line);
  border-inline-start: 3px solid var(--gn-info); border-radius: 6px; box-shadow: 0 8px 24px rgba(17, 24, 39, .12);
  opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
.g-toast2.is-in { opacity: 1; transform: none; }
.g-toast2.is-out { opacity: 0; transform: translateY(-8px); }
.g-toast2__ic { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--gn-info-tint); color: var(--gn-info); margin-top: 0; }
.g-toast2__ic svg { width: 14px; height: 14px; }
.g-toast2__body { flex: 1 1 auto; min-width: 0; padding-top: 2px; overflow-wrap: anywhere; }
.g-toast2__title { display: block; font-weight: 700; }
.g-toast2__x { flex: none; width: 28px; height: 28px; margin: -2px 0 -2px -2px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 4px; background: transparent; color: var(--g-ink-3, #6b7280); cursor: pointer; padding: 0; }
.g-toast2__x:hover { background: #f3f4f6; color: var(--g-ink, #1A1A1A); }
.g-toast2__x:focus-visible { outline: 2px solid var(--g-accent, #1F4E5F); outline-offset: 1px; }
.g-toast2__x svg { width: 14px; height: 14px; }
.g-toast2--success { border-color: var(--gn-ok-line); border-inline-start-color: var(--gn-ok); }
.g-toast2--success .g-toast2__ic { background: var(--gn-ok-tint); color: var(--gn-ok); }
.g-toast2--error { border-color: var(--gn-err-line); border-inline-start-color: var(--gn-err); }
.g-toast2--error .g-toast2__ic { background: var(--gn-err-tint); color: var(--gn-err); }
.g-toast2--warning { border-color: var(--gn-warn-line); border-inline-start-color: var(--gn-warn); }
.g-toast2--warning .g-toast2__ic { background: var(--gn-warn-tint); color: var(--gn-warn); }
@media (prefers-reduced-motion: reduce) { .g-toast2 { transition: none; } }

/* ---------- Inline alert (PHP Utils\UiAlert::render / JS gNotice) ---------- */
.g-alert { direction: rtl; display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box; padding: 10px 12px; margin: 0 0 12px;
  font-size: 14px; line-height: 1.5; color: var(--g-ink, #1A1A1A); background: var(--gn-info-tint); border: 1px solid var(--gn-info-line);
  border-inline-start: 3px solid var(--gn-info); border-radius: 6px; }
.g-alert[hidden] { display: none; }
.g-alert__ic { flex: none; width: 18px; height: 18px; color: var(--gn-info); margin-top: 1px; }
.g-alert__ic svg { width: 18px; height: 18px; display: block; }
.g-alert__body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.g-alert__title { display: block; font-weight: 700; }
.g-alert__x { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0;
  border-radius: 4px; background: transparent; color: var(--g-ink-3, #6b7280); cursor: pointer; }
.g-alert__x:hover { background: rgba(0, 0, 0, .05); }
.g-alert__x svg { width: 14px; height: 14px; }
.g-alert--success { background: var(--gn-ok-tint); border-color: var(--gn-ok-line); border-inline-start-color: var(--gn-ok); }
.g-alert--success .g-alert__ic { color: var(--gn-ok); }
.g-alert--error { background: var(--gn-err-tint); border-color: var(--gn-err-line); border-inline-start-color: var(--gn-err); }
.g-alert--error .g-alert__ic { color: var(--gn-err); }
.g-alert--warning { background: var(--gn-warn-tint); border-color: var(--gn-warn-line); border-inline-start-color: var(--gn-warn); }
.g-alert--warning .g-alert__ic { color: var(--gn-warn); }

/* Older inline message classes now share the alert look (public auth, client portal, admin notices, settings toast) */
.gp-ok, .gp-error, .ga-notice.g-notice--pos, .ga-notice.g-notice--neg { border: 1px solid; border-inline-start-width: 3px; border-radius: 6px; color: var(--g-ink, #1A1A1A) !important; }
.gp-ok, .ga-notice.g-notice--pos { background: var(--gn-ok-tint); border-color: var(--gn-ok-line); border-inline-start-color: var(--gn-ok) !important; }
.gp-error, .ga-notice.g-notice--neg { background: var(--gn-err-tint); border-color: var(--gn-err-line); border-inline-start-color: var(--gn-err) !important; }
[data-ga-toast] { display: none !important; } /* settings template toast now goes through gToast */

/* Legacy Tailwind alert panels (bg-*-50 + border-*): same muted tints, no loud fills. */
:is(.bg-green-50, .bg-emerald-50):is(.border, [class*="border-green"], [class*="border-emerald"]) { background-color: var(--gn-ok-tint) !important; border-color: var(--gn-ok-line) !important; }
:is(.bg-red-50, .bg-rose-50):is(.border, [class*="border-red"], [class*="border-rose"]) { background-color: var(--gn-err-tint) !important; border-color: var(--gn-err-line) !important; }
:is(.bg-yellow-50, .bg-amber-50):is(.border, [class*="border-yellow"], [class*="border-amber"]) { background-color: var(--gn-warn-tint) !important; border-color: var(--gn-warn-line) !important; }
.bg-blue-50:is(.border, [class*="border-blue"]) { background-color: var(--gn-info-tint) !important; border-color: var(--gn-info-line) !important; }
:is(.bg-green-50, .bg-emerald-50):is(.border, [class*="border-green"]) :is(.text-green-600, .text-green-700, .text-green-800, .text-green-900, .text-emerald-600, .text-emerald-700, .text-emerald-800),
:is(.bg-green-50, .bg-emerald-50):is(.border, [class*="border-green"]):is(.text-green-700, .text-green-800) { color: var(--gn-ok) !important; }
:is(.bg-red-50, .bg-rose-50):is(.border, [class*="border-red"]) :is(.text-red-600, .text-red-700, .text-red-800, .text-red-900),
:is(.bg-red-50, .bg-rose-50):is(.border, [class*="border-red"]):is(.text-red-700, .text-red-800) { color: var(--gn-err) !important; }
:is(.bg-yellow-50, .bg-amber-50):is(.border, [class*="border-yellow"], [class*="border-amber"]) :is(.text-yellow-600, .text-yellow-700, .text-yellow-800, .text-amber-600, .text-amber-700, .text-amber-800),
:is(.bg-yellow-50, .bg-amber-50):is(.border, [class*="border-amber"]):is(.text-amber-700, .text-amber-800) { color: var(--gn-warn) !important; }
.bg-blue-50:is(.border, [class*="border-blue"]) :is(.text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900) { color: var(--gn-info) !important; }

/* ---------- Button loading state (g-busy.js) ---------- */
.g-busy { cursor: progress !important; color: transparent !important; -webkit-text-fill-color: transparent; }
.g-busy > *:not(.g-busy__spin) { visibility: hidden !important; }
.g-busy__spin { position: absolute; inset: 0; margin: auto; width: clamp(12px, 1.1em, 18px); height: clamp(12px, 1.1em, 18px);
  box-sizing: border-box; border: 2px solid var(--g-busy-c, currentColor); border-inline-end-color: transparent; border-radius: 50%;
  animation: gBusySpin .7s linear infinite; pointer-events: none; visibility: visible !important; -webkit-text-fill-color: initial; }
.g-busy-lock { cursor: progress !important; }
/* busy always disables the control; keep it looking active (no faded disabled style), just not clickable */
:is(.g-busy, .g-busy-lock):disabled { opacity: 1 !important; cursor: progress !important; }
:is(.g-busy, .g-busy-lock)[aria-disabled="true"]:not(:disabled) { pointer-events: none; }
input.g-busy, input.g-busy-lock { color: inherit !important; -webkit-text-fill-color: inherit; animation: gBusyPulse .8s ease-in-out infinite alternate; }
@keyframes gBusyPulse { from { opacity: .9; } to { opacity: .35; } }
@keyframes gBusySpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .g-busy__spin { animation-duration: 1.6s; } }