/* FX Popup - PRO DARK FRAMED (central, Admin + User)
   dark + light theme via CSS variables
   use with fx-popup.js - no raw confirm() (AGENTS.md rule) */
.fx-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fxFadeIn 0.2s ease;
  --fx-card: var(--card, #ffffff);
  --fx-border: var(--border2, #cbd5e1);
  --fx-text: var(--text, #0f172a);
  --fx-text2: var(--text2, #64748b);
  --fx-input-bg: #f1f5f9;
  --fx-cancel-bg: #f1f5f9;
  --fx-cancel-bd: #e2e8f0;
  --fx-shadow: 0 14px 44px rgba(15,23,42,.18), 0 3px 12px rgba(15,23,42,.08);
  --fx-corner-glow: none;
  --fx-ok-bg: #2563eb; --fx-ok-hover: #1d4ed8;
  --fx-danger-bd:#fecaca;  --fx-success-bd:#bbf7d0;  --fx-warn-bd:#fde68a;  --fx-info-bd:#bfdbfe;  --fx-neutral-bd:#cbd5e1;
  --fx-danger-c:#dc2626;   --fx-success-c:#16a34a;   --fx-warn-c:#d97706;   --fx-info-c:#2563eb;   --fx-neutral-c:#334155;
  --fx-danger-title:#b91c1c; --fx-success-title:#15803d; --fx-warn-title:#b45309; --fx-info-title:#1d4ed8; --fx-neutral-title:#0f172a;
  --fx-danger-icon-bg:#fef2f2; --fx-success-icon-bg:#f0fdf4; --fx-warn-icon-bg:#fffbeb; --fx-info-icon-bg:#eff6ff; --fx-neutral-icon-bg:#f1f5f9;
}
body.dark .fx-overlay {
  background: rgba(2, 6, 23, 0.65);
  --fx-card: #141924;
  --fx-border: #33415c;
  --fx-text: #f1f5f9;
  --fx-text2: #94a3b8;
  --fx-input-bg: #0f141d;
  --fx-cancel-bg: #1b2230;
  --fx-cancel-bd: #33415c;
  --fx-shadow: 0 14px 44px rgba(0,0,0,.6), 0 3px 12px rgba(0,0,0,.4);
  --fx-corner-glow: drop-shadow(0 0 6px var(--corner));
  --fx-ok-bg: #2563eb; --fx-ok-hover: #3b82f6;
  --fx-danger-bd:#7f1d1d;  --fx-success-bd:#14532d;  --fx-warn-bd:#78350f;  --fx-info-bd:#1e3a8a;  --fx-neutral-bd:#33415c;
  --fx-danger-c:#ef4444;   --fx-success-c:#22c55e;   --fx-warn-c:#f59e0b;   --fx-info-c:#3b82f6;   --fx-neutral-c:#94a3b8;
  --fx-danger-title:#fca5a5; --fx-success-title:#86efac; --fx-warn-title:#fcd34d; --fx-info-title:#93c5fd; --fx-neutral-title:#f1f5f9;
  --fx-danger-icon-bg:rgba(220,38,38,.14); --fx-success-icon-bg:rgba(22,163,74,.14); --fx-warn-icon-bg:rgba(245,158,11,.14); --fx-info-icon-bg:rgba(37,99,235,.14); --fx-neutral-icon-bg:#1b2230;
}
.fx-overlay.hidden { display: none; }
.fx-overlay.closing { animation: fxFadeOut 0.18s ease forwards; }

.fx-panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--fx-card);
  border: 2px solid var(--fx-neutral-bd);
  border-radius: 14px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: var(--fx-shadow);
  animation: fxPopIn 0.3s ease;
}
.fx-panel.guide {
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
  text-align: left;
}
.fx-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 11px; margin-top: 10px; text-align: left; }
@media (max-width: 600px) { .fx-guide-grid { grid-template-columns: 1fr; } }
.fx-panel::before,
.fx-panel::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--corner, var(--fx-info-c));
  filter: var(--fx-corner-glow);
  pointer-events: none;
}
.fx-panel::before { top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: 14px; }
.fx-panel::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: 14px; }

.fx-panel.danger  { border-color: var(--fx-danger-bd);  --corner: var(--fx-danger-c);  }
.fx-panel.success { border-color: var(--fx-success-bd); --corner: var(--fx-success-c); }
.fx-panel.warn    { border-color: var(--fx-warn-bd);    --corner: var(--fx-warn-c);    }
.fx-panel.info    { border-color: var(--fx-info-bd);    --corner: var(--fx-info-c);    }

.fx-icon-wrap { margin-bottom: 14px; }
.fx-input-wrap { margin-bottom: 18px; }
.fx-input-wrap.hidden { display: none; }

/* fxForm — ฟอร์มหลายฟิลด์ */
.fx-form-wrap { margin-bottom: 18px; text-align: left; }
.fx-form-wrap.hidden { display: none; }
.fx-field { margin-bottom: 12px; }
.fx-field-label { display: block; font-size: 12px; color: var(--fx-text2); margin-bottom: 5px; font-weight: 600; }

.fx-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--fx-border);
  border-radius: 8px;
  background: var(--fx-input-bg);
  color: var(--fx-text);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fx-input:focus { outline: none; border-color: var(--fx-info-c); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }

.fx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  font-size: 25px;
  border-radius: 50%;
  background: var(--fx-neutral-icon-bg);
  color: var(--fx-neutral-c);
  animation: fxIconPop 0.4s ease 0.08s both;
}
.fx-panel.danger  .fx-icon { background: var(--fx-danger-icon-bg);  color: var(--fx-danger-c);  }
.fx-panel.success .fx-icon { background: var(--fx-success-icon-bg); color: var(--fx-success-c); }
.fx-panel.warn    .fx-icon { background: var(--fx-warn-icon-bg);    color: var(--fx-warn-c);    }
.fx-panel.info    .fx-icon { background: var(--fx-info-icon-bg);    color: var(--fx-info-c);    }

.fx-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fx-neutral-title);
  margin: 0 0 8px;
}
.fx-panel.danger  .fx-title { color: var(--fx-danger-title);  }
.fx-panel.success .fx-title { color: var(--fx-success-title); }
.fx-panel.warn    .fx-title { color: var(--fx-warn-title);    }
.fx-panel.info    .fx-title { color: var(--fx-info-title);    }

.fx-message {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fx-text2);
  word-break: break-word;
  margin-bottom: 22px;
}
.fx-message b { color: var(--fx-text); font-weight: 600; }

.fx-actions { display: flex; gap: 10px; }
.fx-btn {
  flex: 1;
  padding: 11px 16px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.fx-btn:hover { transform: translateY(-1px); }
.fx-btn:active { transform: translateY(0) scale(0.97); }
.fx-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fx-btn-ok { background: var(--fx-ok-bg); color: #fff; }
.fx-btn-ok:hover { background: var(--fx-ok-hover); }
.fx-btn-danger { background: #dc2626; color: #fff; }
.fx-btn-danger:hover { background: #ef4444; }
.fx-btn-success { background: #16a34a; color: #fff; }
.fx-btn-success:hover { background: #22c55e; }
.fx-btn-cancel {
  background: var(--fx-cancel-bg);
  color: var(--fx-text2);
  border: 1px solid var(--fx-cancel-bd);
}
.fx-btn-cancel:hover { color: var(--fx-text); background: var(--fx-cancel-bg); filter: brightness(1.06); }

@keyframes fxFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fxPopIn {
  0%   { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes fxIconPop {
  0%   { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}

/* fxMini — มินิป๊อปอัปการ์ดจิ๋วมุมขวาล่าง (ต่อท้ายเท่านั้น ไม่แตะกฎเดิม) */
/* กรอบรวม ต่ำกว่า .fx-overlay (999999) อยู่ 10 กันบังป๊อปอัปหลัก */
#fxMiniWrap {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999989;
  pointer-events: none;
}
.fx-mini {
  pointer-events: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  width: min(330px, calc(100vw - 32px));
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: inherit;
  animation: fxMiniIn 0.25s ease;
}
.fx-mini.hide { opacity: 0; transition: opacity 0.2s ease; }
.fx-mini.success { border-left-color: var(--green); }
.fx-mini.info    { border-left-color: var(--accent); }
.fx-mini.warn    { border-left-color: var(--gold); }
.fx-mini.error   { border-left-color: var(--red); }
.fx-mini-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: 0 0 auto;
}
.fx-mini.success .fx-mini-icon { background: var(--green-bg, rgba(22,163,74,.12)); color: var(--green); }
.fx-mini.info .fx-mini-icon    { background: var(--accent-bg, rgba(37,99,235,.12)); color: var(--accent); }
.fx-mini.warn .fx-mini-icon    { background: var(--gold-bg, rgba(217,119,6,.12)); color: var(--gold); }
.fx-mini.error .fx-mini-icon   { background: var(--red-bg, rgba(220,38,38,.12)); color: var(--red); }
.fx-mini-body { flex: 1; min-width: 0; }
.fx-mini-title { font-size: 13px; font-weight: 700; color: var(--text); }
.fx-mini-msg { font-size: 12.5px; color: var(--text2); margin-top: 2px; line-height: 1.5; word-break: break-word; }
.fx-mini-x {
  margin-left: auto;
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text3, var(--text2));
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  font-family: inherit;
}
.fx-mini-x:hover { color: var(--text); }
@keyframes fxMiniIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}