/*
 * Flow2API — premium theme overlay.
 * Loaded AFTER the Tailwind CDN so it can refine the base UI: an ambient
 * gradient background, frosted-glass panels, softer shadows, nicer controls
 * and the language switcher. Selectors are kept high-specificity (and a few
 * properties use !important) so they win regardless of Tailwind inject order.
 * No layout/box-model is changed — only surface styling — so nothing breaks.
 */

:root {
  --f2a-radius: 14px;
  --f2a-glass: rgba(255, 255, 255, 0.72);
  --f2a-glass-strong: rgba(255, 255, 255, 0.86);
  --f2a-border: rgba(15, 23, 42, 0.08);
  --f2a-shadow: 0 10px 34px -12px rgba(15, 23, 42, 0.22);
  --f2a-shadow-sm: 0 4px 16px -8px rgba(15, 23, 42, 0.20);
  --f2a-ring: 99, 102, 241;
}

/* ---- Ambient background ---------------------------------------------------- */
html { background: #eef1f8; }

body {
  background: transparent !important;
  font-family: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system,
    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 640px at 8% -12%, rgba(99, 102, 241, 0.20), transparent 60%),
    radial-gradient(1080px 560px at 96% -6%, rgba(14, 165, 233, 0.16), transparent 55%),
    radial-gradient(960px 760px at 50% 118%, rgba(168, 85, 247, 0.15), transparent 55%),
    linear-gradient(180deg, #f7f8fc 0%, #eceff8 100%);
}

/* Faint moving sheen so the backdrop feels alive but stays calm. */
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), transparent 70%);
  opacity: 0.5;
  animation: f2a-drift 18s ease-in-out infinite alternate;
}
@keyframes f2a-drift {
  from { transform: translate3d(-4%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* ---- Glass panels & cards -------------------------------------------------- */
.rounded-lg.border,
.border.rounded-lg {
  background: var(--f2a-glass) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-color: var(--f2a-border) !important;
  border-radius: var(--f2a-radius) !important;
  box-shadow: var(--f2a-shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

/* Stat cards get a subtle hover lift. */
.grid > .rounded-lg.border:hover {
  box-shadow: var(--f2a-shadow);
  transform: translateY(-2px);
  border-color: rgba(var(--f2a-ring), 0.28) !important;
}

/* ---- Sticky header --------------------------------------------------------- */
header.sticky {
  background: rgba(255, 255, 255, 0.66) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--f2a-border) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 24px -18px rgba(15, 23, 42, 0.5);
}
header.sticky .font-bold.text-xl {
  background: linear-gradient(120deg, #4f46e5, #0ea5e9 55%, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}

/* ---- Inputs / selects / textareas ----------------------------------------- */
input.rounded-md,
select.rounded-md,
textarea,
.rounded-md.border.bg-background {
  background: var(--f2a-glass-strong) !important;
  border-color: var(--f2a-border) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
input.rounded-md:focus,
select.rounded-md:focus,
textarea:focus {
  border-color: rgba(var(--f2a-ring), 0.55) !important;
  box-shadow: 0 0 0 3px rgba(var(--f2a-ring), 0.18) !important;
  outline: none;
}

/* ---- Buttons --------------------------------------------------------------- */
button, a.tab-btn, .inline-flex {
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease,
    opacity 0.2s ease, filter 0.2s ease;
}
button.bg-primary,
.bg-primary.text-primary-foreground {
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.6);
}
button.bg-primary:hover { filter: brightness(1.08); }
button:not(:disabled):active { transform: translateY(1px); }

button.bg-blue-600, button.bg-green-600, button.bg-red-600,
.bg-blue-600.text-white, .bg-green-600.text-white {
  box-shadow: 0 8px 20px -12px rgba(37, 99, 235, 0.7);
}
button.bg-blue-600:hover  { box-shadow: 0 10px 22px -10px rgba(37, 99, 235, 0.8); }
button.bg-green-600:hover { box-shadow: 0 10px 22px -10px rgba(22, 163, 74, 0.8); }

/* Icon / ghost buttons: soft hover surface. */
button.hover\:bg-accent:hover,
a.hover\:bg-accent:hover {
  background: rgba(var(--f2a-ring), 0.10) !important;
  border-radius: 10px;
}

/* ---- Tabs ------------------------------------------------------------------ */
.tab-btn { border-radius: 8px 8px 0 0; }
.tab-btn.border-primary {
  border-color: #4f46e5 !important;
  color: #312e81;
}

/* ---- Toggle switches (peer) ------------------------------------------------ */
.peer:checked ~ div,
.peer-checked\:bg-primary {
  background-image: linear-gradient(120deg, #4f46e5, #0ea5e9);
}

/* ---- Scrollbar, selection, focus ------------------------------------------ */
::selection { background: rgba(var(--f2a-ring), 0.24); }
* { scrollbar-width: thin; scrollbar-color: rgba(99, 102, 241, 0.45) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.55); background-clip: content-box; }

/* ---- Toasts (created at runtime with .animate-slide-up) -------------------- */
.animate-slide-up {
  border-radius: 12px !important;
  box-shadow: 0 16px 40px -16px rgba(15, 23, 42, 0.55) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---- Language switcher ----------------------------------------------------- */
.i18n-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--f2a-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--f2a-shadow-sm);
}
.i18n-switch--floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
}
.i18n-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 5px 12px;
  min-width: 40px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: #475569;
  background: transparent;
  border-radius: 999px;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.i18n-btn:hover { color: #1e293b; background: rgba(99, 102, 241, 0.10); }
.i18n-btn.is-active {
  color: #fff;
  background: linear-gradient(120deg, #4f46e5, #0ea5e9);
  box-shadow: 0 6px 16px -8px rgba(79, 70, 229, 0.9);
}

/* ---- Login page centering polish ------------------------------------------ */
body > .flex.min-h-full .bg-background.rounded-lg {
  background: var(--f2a-glass) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: var(--f2a-shadow);
  border: 1px solid var(--f2a-border);
}