/* ZAIA Cyber Green — global skin; served outside Vite to preserve compiled assets. */
:root {
  --zaia-cyber-ink: #effffb;
  --zaia-cyber-muted: #b8d8d2;
  --zaia-cyber-teal: #21e0d2;
  --zaia-cyber-green: #16c978;
  --zaia-cyber-line: rgb(112 226 207 / 24%);
  --zaia-cyber-glass: rgb(3 22 24 / 86%);
  --zaia-cyber-glass-soft: rgb(3 22 24 / 69%);
}

html, body, #app { min-height: 100%; }
html { background: #031516; }
body {
  color: var(--zaia-cyber-ink);
  background: #031516 url('/brand-assets/zaia-cyber-background.png') center / cover fixed no-repeat;
}

/* A consistent dark veil keeps all text readable while leaving the art visible. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgb(1 14 17 / 78%), rgb(0 27 25 / 62%) 52%, rgb(1 11 15 / 79%));
}
#app { position: relative; z-index: 1; }

/* Replace the full-page theme backgrounds used by the dashboard and setup flow. */
#app :is(main,div).min-h-screen {
  background: linear-gradient(125deg, rgb(1 14 17 / 76%), rgb(0 27 25 / 61%) 52%, rgb(1 11 15 / 76%)),
    url('/brand-assets/zaia-cyber-background.png') center / cover fixed no-repeat !important;
}
#app .min-h-screen .mb-6 h1 { color: #effffb !important; text-shadow: 0 2px 12px rgb(0 0 0 / 50%); }
#app .min-h-screen .mb-6 p { color: #c1dfd9 !important; }
#app .min-h-screen .mb-5 > .flex.items-center.gap-4.mb-3 > span {
  color: #effffb !important;
  text-shadow: 0 2px 12px rgb(0 0 0 / 50%);
}
#app .min-h-screen > .absolute.inset-0 { opacity: .16 !important; }
#app :is(main,div).min-h-screen button[type='submit'] {
  color: #f4fffb !important;
  border-color: rgb(83 245 183 / 35%) !important;
  background: linear-gradient(105deg, #007743, #00a966 58%, #00a89b) !important;
  box-shadow: 0 9px 24px rgb(0 158 111 / 24%) !important;
}

/* Login and public app surfaces */
#app main.min-h-screen {
  color: var(--zaia-cyber-ink) !important;
  background: transparent !important;
}
#app main.min-h-screen section {
  color: var(--zaia-cyber-ink) !important;
  border: 1px solid var(--zaia-cyber-line) !important;
  background: var(--zaia-cyber-glass) !important;
  box-shadow: 0 24px 70px rgb(0 0 0 / 42%), inset 0 1px 0 rgb(255 255 255 / 6%) !important;
  backdrop-filter: blur(16px);
}
#app main.min-h-screen :is(h1,h2,h3,h4,label,p,span) { color: inherit; }
#app main.min-h-screen :is(input,textarea,select) {
  color: #f2fffc !important;
  border-color: rgb(139 211 199 / 34%) !important;
  background: rgb(1 17 20 / 78%) !important;
}
#app main.min-h-screen :is(input,textarea,select)::placeholder { color: #a9c7c1 !important; }
#app main.min-h-screen form button[type='submit'] {
  color: #f4fffb !important;
  border: 1px solid rgb(83 245 183 / 35%) !important;
  background: linear-gradient(105deg, #007743, #00a966 58%, #00a89b) !important;
  box-shadow: 0 9px 24px rgb(0 158 111 / 28%) !important;
}
#app main.min-h-screen form button[type='submit']:hover {
  filter: brightness(1.12) saturate(1.08);
}
#app main.min-h-screen :is(input,textarea,select):-webkit-autofill {
  -webkit-text-fill-color: #142522 !important;
  -webkit-box-shadow: 0 0 0 1000px #e9f4f3 inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* Brand accents and legible text across navigation, dashboards and forms. */
#app :is(a, [role='link']) { color: var(--zaia-cyber-teal); }
#app :is(a, [role='link']):hover { color: #8ffff0; }
#app :is(button,[role='button'],input[type='submit']) { accent-color: var(--zaia-cyber-green); }
#app :is(input,textarea,select):focus { outline-color: var(--zaia-cyber-teal); }

/* Preserve solid foreground surfaces where the product uses cards or menus. */
#app :is([role='dialog'],[role='menu'],[data-radix-popper-content-wrapper] > *,
  .n-modal,.n-popover,.n-dropdown,.n-tooltip) {
  border-color: var(--zaia-cyber-line);
  backdrop-filter: blur(14px);
}

@media (max-width: 640px) {
  body { background-attachment: scroll; }
  body::before { position: absolute; min-height: 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}