/* ===== Noctua Visio - skin para o Label Studio ===== */

@font-face {
  font-family: "Inter";
  src: local("Inter");
}

:root {
  /* Fonte da Noctua */
  --font-family-base: "Inter", Figtree, sans-serif !important;

  /* A cor "primary" do Label Studio inteiro é derivada da paleta "grape".
     Sobrescrevendo a escala inteira aqui, todo botao/link/foco/estado ativo
     do app (claro E escuro) passa a usar o laranja da Noctua, sem precisar
     mexer em nenhuma outra regra. */
  --color-grape-000: #fff3ea;
  --color-grape-100: #ffe0c2;
  --color-grape-200: #ffc999;
  --color-grape-300: #ffab5c;
  --color-grape-400: #ff8a33;
  --color-grape-500: #ff6600;
  --color-grape-600: #e65c00;
  --color-grape-700: #cc5200;
  --color-grape-800: #a34200;
  --color-grape-900: #7a3100;
  --color-grape-950: #401900;

  /* Every neutral (backgrounds, surfaces, text, borders) of BOTH themes is
     derived from Label Studio's warm "sand" scale. Replacing it with the
     neutral greys of noctua-site/marca/design-guide.md makes light and dark
     match the site:
       dark:  background 800 #111111, canvas 900 #0a0a0a, text 100, muted 400-600
       light: background 000 #ffffff, alt 100 #f5f5f5, text 800, muted 500-700 */
  --color-sand-000: #ffffff;
  --color-sand-100: #f5f5f5;
  --color-sand-200: #ebebeb;
  --color-sand-300: #dbdbdb;
  --color-sand-400: #b0b0b0;
  --color-sand-500: #888888;
  --color-sand-600: #6b6b6b;
  --color-sand-700: #3a3a3a;
  --color-sand-800: #111111;
  --color-sand-850: #1a1a1a;
  --color-sand-900: #0a0a0a;
  --color-sand-950: #050505;
}

/* Google Fonts Inter, carregada via link no <head> (injetado pelo nginx) */

/* ---------- Logo original do Label Studio: escondida de vez ---------- */
/* (SVGs nao suportam ::before/::after de forma confiavel, entao a troca
   pela logo da Noctua e feita inserindo uma <img> de verdade via JS) */
.lsf-menu-header__logo,
.ls-logo {
  display: none !important;
}

.noctua-logo-img {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}
.noctua-logo-img--header {
  height: 22px;
  width: 22px;
}
.noctua-logo-img--login {
  height: 64px;
  width: 64px;
}

/* ---------- Loading (troca o bichinho animado pela logo da Noctua) ---------- */
.lsf-loading,
.lsf-app-loader {
  position: relative;
}
.lsf-loading > *:not(.noctua-loader) {
  visibility: hidden !important;
}
img[alt="opossum loader"] {
  visibility: hidden !important;
}
.noctua-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: noctua-pulse 1.2s ease-in-out infinite;
  /* Same pairing as the site's <noctua-logo>: light = orange owl with circle */
  background-image: url("/noctua-skin/logo.png");
}
html[data-color-scheme="dark"] .noctua-loader {
  /* dark = white owl */
  background-image: url("/noctua-skin/logo-branco.png");
}
@keyframes noctua-pulse {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.88); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Esconde o "Brought to you by Human Signal" do rodape do login */
.login_page_new_ui .by {
  display: none !important;
}

/* ==================================================================
   Tela de login - reskin completo (dark, estilo noctuavisio.com)
   ================================================================== */
.login_page_new_ui {
  font-family: "Inter", sans-serif !important;
  background-color: #111111 !important;
}

/* Esconde a ilustracao/gradiente/"Did you know" originais do Label Studio,
   e qualquer titulo/subtitulo original que sobrar (o nosso .noctua-hero
   fica fora desse seletor, pois nao e filho direto de .left) */
.login_page_new_ui .left::after,
.login_page_new_ui .tips,
.login_page_new_ui .left > h1,
.login_page_new_ui .left > h2,
.login_page_new_ui .left > h3 {
  display: none !important;
}

.login_page_new_ui .left {
  background: #111111 !important;   /* flat, no glow: design guide main background */
  border-right: 1px solid #222;
}

.login_page_new_ui .right {
  background-color: #111111 !important;
}

/* Same font everywhere on the login page (Label Studio forces Figtree on parts). */
.login_page_new_ui,
.login_page_new_ui * {
  font-family: "Inter", sans-serif !important;
}

/* Bloco de marca injetado via JS dentro de .left */
.noctua-hero {
  max-width: 420px;
  padding: 0 48px;
  color: #fff;
}
/* Logo + product name side by side, like the Noctua Flows login. */
.noctua-hero {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.noctua-hero .noctua-hero-logo {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0;
}
.noctua-hero .noctua-hero-tag {
  color: #ff6600;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.noctua-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  color: #f0f0f0;
  white-space: nowrap;
}
.noctua-hero h1 em {
  color: #ff6600;
  font-style: italic;
}
.noctua-hero p {
  font-size: 1rem;
  line-height: 1.5;
  color: #a3a3a3;
  margin: 0;
}

.login_page_new_ui .form-wrapper {
  background-color: #141414 !important;
  border: 1px solid #262626 !important;
  color: #fff !important;
}
.login_page_new_ui .form-wrapper h2 {
  color: #fff !important;
}
.login_page_new_ui label {
  color: #cccccc !important;
}
.login_page_new_ui input[type="text"],
.login_page_new_ui input[type="email"],
.login_page_new_ui input[type="password"] {
  background-color: #1a1a1a !important;
  border: 1px solid #333 !important;
  color: #fff !important;
}
.login_page_new_ui a {
  color: #ff6600 !important;
}
.login_page_new_ui button[type="submit"],
.login_page_new_ui .btn_primary {
  background-color: #ff6600 !important;
  border-color: #ff6600 !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.login_page_new_ui button[type="submit"]:hover,
.login_page_new_ui .btn_primary:hover {
  background-color: #cc5200 !important;
}

/* Texto injetado via JS ao lado do logo (login e app) */
.noctua-wordmark {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: var(--color-neutral-content, #1a1a1a);
  margin-left: 6px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}