/* Safira: telas de entrada e configuracoes (Authelia) no mesmo visual dos sistemas.
   Injetado pelo Caddy (replace-response) em /auth*. O Authelia usa Tailwind/shadcn com variaveis CSS:
   aqui so se redefinem as variaveis + fonte, sem depender de nomes de classes internas. */
@font-face { font-family: "Jost"; src: url("/safira-estilo/jost.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }

:root {
  --background: #E9ECEE;          /* papel cinza-aco, igual aos sistemas */
  --foreground: #253039;
  --card: #FFFFFF;
  --card-foreground: #253039;
  --popover: #FFFFFF;
  --popover-foreground: #253039;
  --primary: #2A4C63;             /* safira escuro */
  --primary-foreground: #FFFFFF;
  --secondary: #67757E;           /* "Desconectar" e links secundarios (era rosa) */
  --secondary-foreground: #FFFFFF;
  --muted: #F4F6F7;
  --muted-foreground: #67757E;
  --accent: #E3EBF0;
  --accent-foreground: #253039;
  --border: #CDD6DB;
  --input: #CDD6DB;
  --ring: #3E6E8E;
  --radius: .2rem;
  --custom-loading-bar: #3E6E8E;
  --font-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* tema escuro (aparelho em modo escuro; Authelia theme: auto) */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #14191E; --foreground: #DCE3E8; --card: #1C232A; --card-foreground: #DCE3E8;
    --popover: #1C232A; --popover-foreground: #DCE3E8; --primary: #7FA6C2; --primary-foreground: #0F1418;
    --secondary: #93A1AB; --secondary-foreground: #0F1418; --muted: #232B33; --muted-foreground: #93A1AB;
    --accent: #26313A; --accent-foreground: #DCE3E8; --border: #33404A; --input: #33404A; --ring: #7FA6C2;
    --custom-loading-bar: #7FA6C2;
  }
}
.dark {
  --background: #14191E; --foreground: #DCE3E8; --card: #1C232A; --card-foreground: #DCE3E8;
  --popover: #1C232A; --popover-foreground: #DCE3E8; --primary: #7FA6C2; --primary-foreground: #0F1418;
  --secondary: #93A1AB; --secondary-foreground: #0F1418; --muted: #232B33; --muted-foreground: #93A1AB;
  --accent: #26313A; --accent-foreground: #DCE3E8; --border: #33404A; --input: #33404A; --ring: #7FA6C2;
  --custom-loading-bar: #7FA6C2;
}

html, body, button, input, label, h1, h2, h3, h4, h5, h6, p, a, span, div { font-family: var(--font-sans) !important; }
body { background: var(--background) !important; color: var(--foreground); }

/* cartao central: login e codigo (coluna de 444px) e configuracoes (bg-card) */
[class*="max-w-[444px]"] > div, .rounded-xl.border.bg-card {
  background: var(--card) !important; border: 1px solid var(--border) !important; border-top: 3px solid var(--primary) !important;
  border-radius: 3px !important; padding: 24px 16px 18px; box-shadow: 0 1px 2px rgba(37, 48, 57, .05);
}
[class*="max-w-[444px]"] > div div.rounded-xl, [class*="max-w-[444px]"] [class*="border"][class*="rounded"]:not(input):not(button) { border-radius: 3px !important; }
/* caixa do codigo de 6 digitos: menos margem para os 6 campos caberem numa linha */
[class*="max-w-[444px]"] > div [class*="border"][class*="rounded"]:not(input):not(button) { padding-left: 6px !important; padding-right: 6px !important; }
h5 { font-weight: 500 !important; letter-spacing: .01em; color: var(--foreground); }

/* botao principal: sem caixa alta, peso medio */
button.bg-primary { text-transform: none !important; letter-spacing: .02em; font-size: .95rem !important; border-radius: 3px !important; }
input { border-radius: 3px !important; }

/* barra superior das configuracoes */
nav[class*="bg-primary"] { background: var(--primary) !important; }   /* so a barra: inputs tem "selection:bg-primary" na classe */

/* "Desenvolvido por Authelia" mais discreto */
a[href*="authelia.com"] { opacity: .55; }

/* barra das configuracoes no escuro: cor do cartao, nao azul claro */
@media (prefers-color-scheme: dark) { nav[class*="bg-primary"][class*="text-primary-foreground"] { background: var(--card) !important; color: var(--foreground) !important; border-bottom: 1px solid var(--border); } }
.dark nav[class*="bg-primary"][class*="text-primary-foreground"] { background: var(--card) !important; color: var(--foreground) !important; border-bottom: 1px solid var(--border); }
@media (prefers-color-scheme: dark) { nav[class*="bg-primary"] button svg { color: var(--foreground); } }
.dark nav[class*="bg-primary"] button svg { color: var(--foreground); }

/* botao de voltar aos sistemas nas configuracoes (desenhado por voltar.js) */
#safira-voltar { position: fixed; top: 10px; right: 16px; z-index: 60; display: flex; gap: 6px; flex-wrap: wrap; }
#safira-voltar a { font-size: .9rem; font-weight: 500; text-decoration: none; padding: 6px 14px; border-radius: 3px;
  background: var(--card); color: var(--foreground); border: 1px solid var(--border); }
#safira-voltar a:hover { border-color: var(--ring); }