/*
 * MK Pro na tela de login da Z-PRO (mkpro.mkautosolution.cloud): o sistema
 * multicanal de multiatendimento da MK, com o visual da família Mike Agentes
 * (Rafael, 08/10: assina com o NOME "MK Pro" e o ponto laranja, sem o anel).
 *
 * O nginx injeta este arquivo e o login.js em toda página da Z-PRO, em três
 * camadas (Rafael, 08/10: "quero que esteja em todo projeto"):
 *   1. o sistema todo: fonte Bricolage, cor principal em tinta (claro no tema
 *      escuro), logotipo MK Pro no lugar do logo da Customizar;
 *   2. as telas de acesso (cadastro, recuperar senha, Master Key, 2 fatores):
 *      html[data-mk-auth], posto pelo login.js;
 *   3. o login: html[data-mk-login], com o vídeo ao lado.
 * Sem mexer no código da Z-PRO: uma atualização dela não apaga a pele. Se ela
 * mudar o desenho de uma tela, os seletores param de casar e a tela volta ao
 * visual da Z-PRO, sem quebrar.
 *
 * Base: a variante 4 de login da Z-PRO (a configurada em 08/10). Desenho: o do
 * login do painel Mike Agentes, com o vídeo do MK Pro no lugar do bloco escuro
 * (video/src/PecasDosEmblemas.tsx, FundoLogin). Logotipo: marca/mkpro.
 */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
@font-face { font-family: "Bricolage MK"; font-weight: 400; font-display: swap; src: url("/mk-identidade/fontes/BricolageGrotesque-Regular.ttf") format("truetype"); }
@font-face { font-family: "Bricolage MK"; font-weight: 800; font-display: swap; src: url("/mk-identidade/fontes/BricolageGrotesque-ExtraBold.ttf") format("truetype"); }


/* ============ 1. o sistema todo ============ */
:root {
  --mk-tinta: #15171a;
  --mk-sinal: #f0612b;
  --mk-concreto: #e4e5e2;
  --mk-papel: #f6f6f4;
  --mk-cinza: #50544e;
  --mk-apoio: #a9ada6;
  --mk-linha: #dfe0dc;
}
/* a Z-PRO põe a fonte da Customizar inline no <html> (--font-app) e o next/font
   declara --font-sans no <body>: as duas, nos dois lugares */
html, body {
  --font-app: "Bricolage Grotesque", "Bricolage MK", "Segoe UI", system-ui, sans-serif !important;
  --font-sans: "Bricolage Grotesque", "Bricolage MK", "Segoe UI", system-ui, sans-serif !important;
}
/* cor principal: tinta no claro, claro no escuro (o padrão da Z-PRO já é quase isso) */
:root:not(.dark) {
  --primary: 216 10% 9% !important;
  --primary-foreground: 90 9% 92% !important;
  --ring: 216 10% 9% !important;
  --sidebar-primary: 216 10% 9% !important;
  --sidebar-primary-foreground: 90 9% 92% !important;
}
:root.dark {
  --primary: 90 9% 92% !important;
  --primary-foreground: 216 10% 9% !important;
  --ring: 90 9% 80% !important;
  --sidebar-primary: 90 9% 92% !important;
  --sidebar-primary-foreground: 216 10% 9% !important;
}
/* o logo da Customizar ("MK AUTOSOLUTION") vira o logotipo MK Pro */
img[src*="/publicLogoDark"] { content: url("/mk-identidade/logo-claro.svg"); object-fit: contain; }
img[src*="/publicLogo"]:not([src*="/publicLogoDark"]) { content: url("/mk-identidade/logo.svg"); object-fit: contain; }

/* ============ 2. as telas de acesso ============ */
html[data-mk-auth] {
  color-scheme: light;
  --background: 80 4% 89% !important;
  --foreground: 216 10% 9% !important;
  --card: 60 9% 96% !important;
  --card-foreground: 216 10% 9% !important;
  --muted: 80 4% 89% !important;
  --muted-foreground: 90 4% 32% !important;
  --border: 80 5% 87% !important;
  --input: 80 5% 87% !important;
  --accent: 80 4% 89% !important;
  --accent-foreground: 216 10% 9% !important;
}
html[data-mk-auth] body,
html[data-mk-auth] .min-h-screen { background: var(--mk-concreto) !important; color: var(--mk-tinta); }
html[data-mk-auth] .max-w-md > .rounded-xl {
  background: var(--mk-papel) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 28px !important;
  padding: 12px 8px;
}
html[data-mk-auth] .max-w-md > .rounded-xl > .flex.flex-col.text-center { text-align: left !important; align-items: flex-start; }
html[data-mk-auth] .max-w-md > .rounded-xl > .flex.flex-col.text-center > *:not(h3):not(p) { margin-left: 0 !important; }
html[data-mk-auth] .max-w-md > .rounded-xl > .flex.flex-col.text-center img[alt="Logo"] { display: none !important; }
/* no cadastro o logo vem dentro de uma caixa de 56 px: some a caixa inteira */
html[data-mk-auth] .max-w-md > .rounded-xl > .flex.flex-col.text-center > div:has(> img[alt="Logo"]) { display: none !important; }
/* o controle deslizante (Master Key), igual ao do login */
html[data-mk-auth] .max-w-md > .rounded-xl .relative.h-11 { background: #fff !important; border-color: var(--mk-linha) !important; border-radius: 14px !important; }
html[data-mk-auth] .max-w-md > .rounded-xl .relative.h-11 > .bg-primary { border-radius: 12px !important; }
html[data-mk-auth] .max-w-md > .rounded-xl > .flex.flex-col.text-center::before {
  content: "";
  display: block;
  width: 100%;
  height: 34px;
  margin-bottom: 18px;
  background: url("/mk-identidade/logo.svg") left center / contain no-repeat;
}
html[data-mk-auth] .max-w-md > .rounded-xl h3 { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -0.035em !important; }
html[data-mk-auth] .max-w-md > .rounded-xl label { font-weight: 800 !important; }
html[data-mk-auth] .max-w-md > .rounded-xl input {
  background: #fff !important;
  border: 1px solid var(--mk-linha) !important;
  border-radius: 14px !important;
  height: 44px !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
html[data-mk-auth] .max-w-md > .rounded-xl input:focus { border-color: var(--mk-sinal) !important; --tw-ring-color: transparent !important; }
html[data-mk-auth] .max-w-md > .rounded-xl button[role="combobox"] { border-radius: 14px !important; height: 44px !important; background: #fff !important; }
html[data-mk-auth] .max-w-md > .rounded-xl button[type="submit"],
html[data-mk-auth] .max-w-md > .rounded-xl button.bg-primary {
  background: var(--mk-tinta) !important;
  color: #eceee9 !important;
  border-radius: 999px !important;
  height: 46px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
html[data-mk-auth] .max-w-md > .rounded-xl a { color: var(--mk-tinta) !important; font-weight: 800; }
html[data-mk-auth] .max-w-md > .rounded-xl a:hover { color: var(--mk-sinal) !important; }

/* ============ 3. o login ============ */
html[data-mk-login] {
  /* o bloco da marca: proporção do vídeo (1200×1350) e altura que cabe na tela */
  --mk-h: min(640px, 84vh);
  --mk-w: calc(var(--mk-h) * 0.8889);
  /* a cor principal da Z-PRO vira a tinta (controle deslizante, anéis de foco) */
  --primary: 216 10% 9% !important;
  --primary-foreground: 90 9% 92% !important;
  --ring: 216 10% 9% !important;
  color-scheme: light;
}
html[data-mk-login] body { background: var(--mk-concreto) !important; }

/* a página: concreto, sem o degradê e sem as bolhas */
html[data-mk-login] .min-h-screen.relative.overflow-hidden {
  background: var(--mk-concreto) !important;
  font-family: "Bricolage MK", "Segoe UI", system-ui, sans-serif !important;
  color: var(--mk-tinta);
}
html[data-mk-login] .min-h-screen.relative.overflow-hidden > .absolute.rounded-full { display: none !important; }

/* o cartão do formulário: papel, chapado, cantos do painel */
html[data-mk-login] .min-h-screen.relative.overflow-hidden > .relative.z-10 > .rounded-2xl {
  background: var(--mk-papel) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 28px !important;
  padding: 36px 32px !important;
  color: var(--mk-tinta);
}
html[data-mk-login] .rounded-2xl * { font-family: inherit !important; text-shadow: none !important; }
html[data-mk-login] .rounded-2xl [class*="text-white"] { color: var(--mk-cinza) !important; }

/* cabeçalho do cartão: MK Pro (no celular) + "Entrar" + o que é o sistema */
html[data-mk-login] .rounded-2xl > .text-center { text-align: left !important; }
html[data-mk-login] .rounded-2xl > .text-center > img { display: none !important; }
html[data-mk-login] .rounded-2xl > .text-center::before {
  content: "";
  display: block;
  height: 34px;
  margin-bottom: 22px;
  background: url("/mk-identidade/logo.svg") left center / contain no-repeat;
}
html[data-mk-login] .rounded-2xl > .text-center > h1 { font-size: 0 !important; line-height: 0 !important; }
html[data-mk-login] .rounded-2xl > .text-center > h1::after {
  content: "Entrar";
  display: block;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--mk-tinta);
}
html[data-mk-login] .rounded-2xl > .text-center > p { font-size: 0 !important; }
html[data-mk-login] .rounded-2xl > .text-center > p::after {
  content: "Sistema multicanal de multiatendimento";
  font-size: 14px;
  color: var(--mk-cinza);
}

/* rótulos e campos, como no painel */
html[data-mk-login] .rounded-2xl label { color: var(--mk-tinta) !important; font-weight: 800 !important; font-size: 14px !important; }
html[data-mk-login] .rounded-2xl label[for="email"] { font-size: 0 !important; }
html[data-mk-login] .rounded-2xl label[for="email"]::after { content: "E-mail"; font-size: 14px; }
html[data-mk-login] .rounded-2xl label[for="password"] { text-transform: capitalize; }
html[data-mk-login] .rounded-2xl a[href="/reset/request"] { color: var(--mk-cinza) !important; font-size: 12px !important; }
html[data-mk-login] .rounded-2xl a[href="/reset/request"]:hover { color: var(--mk-sinal) !important; }
html[data-mk-login] .rounded-2xl input {
  background: #fff !important;
  border: 1px solid var(--mk-linha) !important;
  border-radius: 14px !important;
  color: var(--mk-tinta) !important;
  height: 44px !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
html[data-mk-login] .rounded-2xl input::placeholder { color: var(--mk-apoio) !important; }
html[data-mk-login] .rounded-2xl input:focus,
html[data-mk-login] .rounded-2xl input:focus-visible { border-color: var(--mk-sinal) !important; outline: none !important; --tw-ring-color: transparent !important; }
html[data-mk-login] .rounded-2xl button[aria-label="Mostrar senha"],
html[data-mk-login] .rounded-2xl button[aria-label="Ocultar senha"] { color: var(--mk-cinza) !important; height: 44px !important; width: 44px !important; background: transparent !important; }

/* o controle deslizante: trilho branco, alça em tinta */
html[data-mk-login] .rounded-2xl .relative.h-11 {
  background: #fff !important;
  border-color: var(--mk-linha) !important;
  border-radius: 14px !important;
}
html[data-mk-login] .rounded-2xl .relative.h-11 > .bg-primary { border-radius: 12px !important; background: var(--mk-tinta) !important; color: #eceee9 !important; }
html[data-mk-login] .rounded-2xl .relative.h-11 > .bg-primary\/15 { background: rgba(21, 23, 26, 0.08) !important; }
html[data-mk-login] .rounded-2xl .text-muted-foreground,
html[data-mk-login] .rounded-2xl [class*="text-muted-foreground"] { color: var(--mk-cinza) !important; }

/* Entrar: a pílula em tinta do painel */
html[data-mk-login] .rounded-2xl button[type="submit"] {
  background: var(--mk-tinta) !important;
  color: #eceee9 !important;
  border-radius: 999px !important;
  height: 46px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
html[data-mk-login] .rounded-2xl button[type="submit"]:disabled { opacity: 0.45 !important; }

/* rodapé do cartão */
html[data-mk-login] .rounded-2xl a[href="/signup"] { color: var(--mk-tinta) !important; font-weight: 800 !important; }
html[data-mk-login] .rounded-2xl a:hover { color: var(--mk-sinal) !important; }
html[data-mk-login] .rounded-2xl .space-y-3 button { color: var(--mk-cinza) !important; }
html[data-mk-login] .rounded-2xl .space-y-3 button:hover { background: var(--mk-concreto) !important; color: var(--mk-tinta) !important; }

/* o bloco da marca (vídeo), ao lado do cartão, só em tela grande */
#mk-lado { display: none; }
@media (min-width: 1024px) and (min-height: 640px) {
  html[data-mk-login] #mk-lado {
    display: block;
    position: fixed;
    z-index: 0;
    top: 50%;
    left: calc(50% - (var(--mk-w) + 16px + 448px) / 2);
    width: var(--mk-w);
    height: var(--mk-h);
    transform: translateY(-50%);
    border-radius: 28px;
    overflow: hidden;
    background: var(--mk-tinta);
    pointer-events: none;
    animation: mk-entra 0.4s ease-out both;
  }
  html[data-mk-login] #mk-lado video { width: 100%; height: 100%; object-fit: cover; display: block; }
  html[data-mk-login] .min-h-screen.relative.overflow-hidden > .relative.z-10 {
    transform: translateX(calc((var(--mk-w) + 16px) / 2)) !important;
  }
  html[data-mk-login] .min-h-screen.relative.overflow-hidden > .relative.z-10 > .rounded-2xl {
    min-height: var(--mk-h);
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
  /* com o vídeo ao lado, a marca já está nele: o cartão não repete o logo */
  html[data-mk-login] .rounded-2xl > .text-center::before { display: none; }
}
@keyframes mk-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-mk-login] #mk-lado { animation: none; } }