/* Minimal CSS on top of Tailwind — just things Tailwind can't easily express. */

:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

/* Chart.js default colors for dark theme */
canvas {
  max-width: 100%;
}

/* Friendlier focus rings */
*:focus-visible {
  outline: 2px solid rgba(138, 43, 226, 0.6);
  outline-offset: 2px;
}

/* Scrollbars (dark — light uses theme-light.css) */
html.dark ::-webkit-scrollbar { height: 10px; width: 10px; }
html.dark ::-webkit-scrollbar-track  { background: #0f172a; }
html.dark ::-webkit-scrollbar-thumb  { background: #334155; border-radius: 10px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

html:not(.dark) ::-webkit-scrollbar        { height: 10px; width: 10px; }
html:not(.dark) ::-webkit-scrollbar-track  { background: #f1f5f9; }
html:not(.dark) ::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 10px; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Keep table rows tidy on small screens */
@media (max-width: 640px) {
  table th, table td { white-space: nowrap; }
}

/* AI insights: bottom fade via mask (works in light + dark; shows card behind) */
#ff-ai-insights-text.ff-ai-insights-text--collapsed {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 52%,
    rgba(0, 0, 0, 0.5) 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 52%,
    rgba(0, 0, 0, 0.5) 72%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#ff-ai-insights-text:not(.ff-ai-insights-text--collapsed) {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Auth / login: page bg matches main app (slate-950 + gradient) */
#ff-body-auth {
  min-height: 100vh;
  /* Match layout.ejs body in light: zinc-50ish */
  --ff-auth-bg: #fafafa;
  --ff-auth-gradient: radial-gradient(ellipse 120% 100% at 50% -18%, rgba(138, 43, 226, 0.1) 0%, var(--ff-auth-bg) 55%);
  background: var(--ff-auth-gradient) !important;
  background-color: var(--ff-auth-bg) !important;
  color: rgb(15 23 42);
}
/* Same base as main app body: bg-slate-950 */
html.dark #ff-body-auth {
  --ff-auth-bg: #020617;
  --ff-auth-gradient: radial-gradient(ellipse 120% 100% at 50% -12%, rgba(138, 43, 226, 0.22) 0%, var(--ff-auth-bg) 52%);
  color: rgb(241 245 249);
}

/* Auth copy (theme-light.css rewrites .text-slate-* with !important — these win inside auth) */
#ff-body-auth .ff-auth-h1 { color: rgb(15 23 42) !important; }
html.dark #ff-body-auth .ff-auth-h1 { color: rgb(255 255 255) !important; }
#ff-body-auth .ff-auth-text { color: rgb(51 65 85) !important; }
html.dark #ff-body-auth .ff-auth-text { color: rgb(203 213 225) !important; }
#ff-body-auth .ff-auth-muted { color: rgb(71 85 105) !important; }
html.dark #ff-body-auth .ff-auth-muted { color: rgb(148 163 184) !important; }
#ff-body-auth .ff-auth-strong { color: rgb(15 23 42) !important; }
html.dark #ff-body-auth .ff-auth-strong { color: rgb(241 245 249) !important; }
/* Cards: align with app panels (e.g. bg-slate-900/60 + border-slate-800) */
#ff-body-auth .ff-auth-surface {
  background-color: #ffffff !important;
  border: 1px solid rgb(226 232 240) !important;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 4px 16px rgb(15 23 42 / 0.06) !important;
}
html.dark #ff-body-auth .ff-auth-surface {
  /* slate-900 — same family as stat cards, clearly above slate-950 page */
  background-color: #0f172a !important;
  border: 1px solid rgb(30 41 59) !important;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.35),
    0 4px 24px rgb(0 0 0 / 0.45) !important;
}
#ff-body-auth .ff-auth-tile {
  background-color: rgb(248 250 252) !important;
  border: 1px solid rgb(226 232 240) !important;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset !important;
}
html.dark #ff-body-auth .ff-auth-tile {
  /* Nested panels: slightly darker + visible edge (like rows on dashboard) */
  background-color: #020617 !important;
  border: 1px solid rgb(51 65 85) !important;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset !important;
}
#ff-body-auth .ff-auth-input {
  border: 1px solid rgb(203 213 225) !important;
  color: rgb(15 23 42) !important;
  background-color: #ffffff !important;
}
#ff-body-auth .ff-auth-input::placeholder { color: rgb(100 116 139) !important; }
html.dark #ff-body-auth .ff-auth-input {
  color: rgb(241 245 249) !important;
  background-color: #020617 !important;
  border: 1px solid rgb(71 85 105) !important;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.2) inset !important;
}
html.dark #ff-body-auth .ff-auth-input::placeholder { color: rgb(100 116 139) !important; }
#ff-body-auth .ff-auth-panel {
  background-color: rgb(254 252 232) !important;
  border: 1px solid rgb(253 224 71) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05) !important;
}
html.dark #ff-body-auth .ff-auth-panel {
  background-color: rgba(45 20 5 / 0.85) !important;
  border: 1px solid rgb(180 83 9) !important;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2) !important;
}
#ff-body-auth .ff-auth-img-wrap {
  background-color: rgb(241 245 249) !important;
  border: 1px solid rgb(203 213 225) !important;
}
html.dark #ff-body-auth .ff-auth-img-wrap {
  background-color: #020617 !important;
  border: 1px solid rgb(30 41 59) !important;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset !important;
}
#ff-body-auth .ff-auth-promo {
  background-color: #ffffff !important;
  border: 1px solid rgb(226 232 240) !important;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 4px 16px rgb(15 23 42 / 0.05) !important;
}
html.dark #ff-body-auth .ff-auth-promo {
  background-color: #0f172a !important;
  border: 1px solid rgb(30 41 59) !important;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.35),
    0 4px 24px rgb(0 0 0 / 0.45) !important;
}
#ff-body-auth .ff-auth-divider-label { color: rgb(100 116 139) !important; background-color: #ffffff !important; }
html.dark #ff-body-auth .ff-auth-divider-label { color: rgb(148 163 184) !important; background-color: #0f172a !important; }