/* Identidade visual Toda Internet */
:root { --toda-roxo: #4b1f7a; --toda-roxo-esc: #36145a; --toda-verde: #3ddc84; }
/* ===== Tela de login (estilo dividido) ===== */
body:has(#content.page-login) { margin: 0; background: var(--toda-roxo-esc) !important; }
body:has(#content.page-login) #header { display: none !important; }
body:has(#content.page-login) #content-wrapper {
  position: fixed; inset: 0; display: flex; align-items: stretch; margin: 0 !important; padding: 0 !important;
  background:
    radial-gradient(circle at 62% 38%, rgba(61,220,132,.38) 0, rgba(61,220,132,0) 32%),
    radial-gradient(circle at 30% 55%, rgba(140,80,220,.55) 0, rgba(140,80,220,0) 40%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0/14px 14px,
    linear-gradient(135deg, #1e0b36 0%, #36145a 45%, #4b1f7a 100%);
}
body:has(#content.page-login) #content-wrapper::before {
  content: "Conectando você ao que importa.";
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 330px 40px 0; box-sizing: border-box;
  color: #fff; font: 600 30px/1.3 "Segoe UI", system-ui, sans-serif;
  background: url(/brand/logo.png) center calc(50% - 70px) / 250px auto no-repeat;
}
body:has(#content.page-login) #content.page-login {
  width: 460px; flex: none; margin: 10px; padding: 48px 56px; box-sizing: border-box;
  border-radius: 22px; background: #f3eefa; box-shadow: 0 10px 40px rgba(0,0,0,.35);
  display: flex; flex-direction: column; justify-content: center; position: relative;
  font-family: "Segoe UI", system-ui, sans-serif;
}
body:has(#content.page-login) #content.page-login::before {
  content: ""; position: absolute; top: 26px; left: 28px; width: 56px; height: 50px;
  background: url(/brand/logo.png) center/contain no-repeat; border-radius: 8px;
}
#content.page-login h1 { font-size: 0 !important; margin: 0 0 6px; }
#content.page-login h1::after { content: "Bem-vindo! ✦"; font-size: 30px; font-weight: 700; color: #1d1230; }
#content.page-login form::before {
  content: "Insira suas credenciais para acessar o ACS da Toda Internet.";
  display: block; color: #4a4258; font-size: 14px; margin: 0 0 28px;
}
#content.page-login label { font-size: 0 !important; display: block; margin-bottom: 6px; }
#content.page-login label[for=username]::after { content: "Usuário"; font-size: 14px; font-weight: 600; color: #2b2140; }
#content.page-login label[for=password]::after { content: "Senha"; font-size: 14px; font-weight: 600; color: #2b2140; }
#content.page-login input {
  width: 100% !important; box-sizing: border-box; height: 46px; padding: 0 14px; font-size: 15px;
  border: 1px solid #d9cdea !important; border-radius: 10px; background: #e7def3 !important; outline: none;
}
#content.page-login input:focus { border-color: var(--toda-roxo) !important; background: #fff !important; }
#content.page-login p { margin: 0 0 18px; }
#content.page-login button.primary {
  width: 100%; height: 46px; margin-top: 10px; border-radius: 10px; font-size: 0 !important; cursor: pointer;
  background: transparent !important; border: 1.5px solid var(--toda-roxo) !important;
}
#content.page-login button.primary::after { content: "Entrar  →"; font-size: 15px; font-weight: 600; color: var(--toda-roxo); }
#content.page-login button.primary:hover { background: var(--toda-roxo) !important; }
#content.page-login button.primary:hover::after { color: #fff; }
#content.page-login > a { display: block; text-align: center; margin-top: 18px; font-size: 0; cursor: pointer; }
#content.page-login > a::after { content: "Alterar senha"; font-size: 14px; color: var(--toda-roxo); }
@media (max-width: 860px) {
  body:has(#content.page-login) #content-wrapper::before { display: none; }
  body:has(#content.page-login) #content.page-login { width: auto; flex: 1; padding: 90px 24px 40px; }
}


/* Ajustes para conviver com o visual interno */
body:has(#content.page-login) #content-wrapper { flex-direction: row !important; height: 100vh !important; width: 100vw !important; max-width: none !important; }
body:has(#content.page-login) #content-wrapper::before { flex: 1 1 auto !important; order: 0; }
body:has(#content.page-login) #content.page-login { order: 1; margin: 10px !important; padding: 48px 56px !important; max-width: none !important; min-height: 0 !important; height: auto !important; align-self: stretch !important; }
#content.page-login label { text-transform: none !important; letter-spacing: normal !important; }
#content.page-login h1 { padding-top: 0 !important; }

/* ===== Parte interna: cores da Toda quase transparentes (vidro) ===== */
body:not(:has(#content.page-login)) {
  --mx-rail: rgba(255,255,255,.30);
  --mx-page: rgba(255,255,255,.42);
  --mx-card: rgba(255,255,255,.58);
  --mx-card-in: rgba(255,255,255,.40);
  --mx-line: rgba(75,31,122,.16);
  --mx-track: rgba(75,31,122,.12);
  background:
    radial-gradient(circle at 92% 8%, rgba(61,220,132,.38) 0, rgba(61,220,132,0) 38%),
    radial-gradient(circle at 8% 92%, rgba(75,31,122,.45) 0, rgba(75,31,122,0) 45%),
    radial-gradient(circle at 55% 45%, rgba(155,110,215,.30) 0, rgba(155,110,215,0) 55%),
    linear-gradient(135deg, #d8c5ef 0%, #ece2f8 45%, #d6f1e3 100%) !important;
  background-attachment: fixed !important;
}
body:not(:has(#content.page-login)) #header { background: var(--mx-rail) !important; backdrop-filter: blur(10px); }
body:not(:has(#content.page-login)) #content-wrapper { background: var(--mx-page) !important; backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.45); }
body:not(:has(#content.page-login)) #side-menu,
body:not(:has(#content.page-login)) .mx-card,
body:not(:has(#content.page-login)) .mx-cpanel,
body:not(:has(#content.page-login)) .mx-box {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 4px 18px rgba(75,31,122,.08) !important;
}
body:not(:has(#content.page-login)) #content table thead th,
body:not(:has(#content.page-login)) .mx-table th { background: rgba(75,31,122,.78) !important; color: #fff !important; }
body:not(:has(#content.page-login)) #content table tbody tr:hover td { background: rgba(61,220,132,.16) !important; }