/* ============================================================
   tstt-theme.css
   Tema TSTT injetado no app Multica via nginx sub_filter.
   Sobrescreve cores, esconde branding multica, adiciona footer TSTT.
   Não modifica o source — sobrevive a updates do upstream.
   ============================================================ */

/* === Variáveis globais sobrescritas (cobre HSL split, hex e OKLCH) === */
:root, .dark, [data-theme="dark"], html {
  /* TSTT palette */
  --tstt-bg-0: #050B18;
  --tstt-bg-1: #0A1628;
  --tstt-bg-2: #0F1F35;
  --tstt-primary: #1E5BA8;
  --tstt-primary-light: #3DA0E6;
  --tstt-accent: #DC1F26;
  --tstt-text: #E8EEF7;
  --tstt-muted: #8A9BB8;

  /* Override shadcn HSL-split (sem !important pra não quebrar utilitários) */
  --background: 213 56% 6% !important;
  --foreground: 213 30% 94% !important;
  --card: 213 53% 10% !important;
  --card-foreground: 213 30% 94% !important;
  --popover: 213 53% 10% !important;
  --popover-foreground: 213 30% 94% !important;
  --primary: 212 70% 39% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 213 40% 14% !important;
  --secondary-foreground: 213 30% 94% !important;
  --muted: 213 30% 18% !important;
  --muted-foreground: 213 20% 70% !important;
  --accent: 357 75% 49% !important;
  --accent-foreground: 0 0% 100% !important;
  --destructive: 357 75% 49% !important;
  --destructive-foreground: 0 0% 100% !important;
  --border: 213 40% 22% !important;
  --input: 213 40% 18% !important;
  --ring: 212 70% 50% !important;

  /* Override hex puro para Tailwind 4 / CSS vars diretos */
  --color-background: var(--tstt-bg-0) !important;
  --color-foreground: var(--tstt-text) !important;
  --color-primary: var(--tstt-primary) !important;
  --color-accent: var(--tstt-accent) !important;
}

/* === Background do app === */
html, body {
  background: var(--tstt-bg-0) !important;
  background-image:
    radial-gradient(1200px 700px at 85% -10%, rgba(220, 31, 38, 0.08), transparent 60%),
    radial-gradient(1000px 800px at -5% 110%, rgba(30, 91, 168, 0.22), transparent 55%),
    linear-gradient(180deg, var(--tstt-bg-0) 0%, var(--tstt-bg-1) 50%, var(--tstt-bg-0) 100%) !important;
  background-attachment: fixed !important;
  color: var(--tstt-text) !important;
}

/* === Esconde branding "multica" do header/sidebar === */
/* Logo image que geralmente tem nome com "multica" ou path com /multica */
img[alt*="multica" i],
img[src*="multica" i]:not([src*="logo-troi"]) {
  display: none !important;
}

/* Texto "multica" em headers/links genéricos.
   CSS não consegue selecionar por texto. JS (tstt-theme.js) faz isso. */

/* === Botões primários ficam azul TSTT === */
button[data-variant="default"],
button.btn-primary,
.bg-primary {
  background: linear-gradient(135deg, var(--tstt-primary) 0%, var(--tstt-primary-light) 100%) !important;
  border-color: rgba(61, 160, 230, 0.5) !important;
  color: white !important;
}
button[data-variant="default"]:hover,
button.btn-primary:hover,
.bg-primary:hover {
  background: linear-gradient(135deg, var(--tstt-primary-light) 0%, var(--tstt-primary) 100%) !important;
  box-shadow: 0 4px 18px rgba(30, 91, 168, 0.45) !important;
}

/* Links em azul TSTT */
a:not([role="button"]):not(.no-tstt) {
  color: var(--tstt-primary-light);
}
a:not([role="button"]):not(.no-tstt):hover {
  color: var(--tstt-accent);
}

/* === Inputs / focus ring em azul TSTT === */
input:focus, textarea:focus, select:focus,
[role="textbox"]:focus-within,
input[type="text"]:focus, input[type="email"]:focus {
  outline: none !important;
  border-color: var(--tstt-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(61, 160, 230, 0.2) !important;
}

/* === Cards / surfaces === */
.bg-card, [class*="bg-card"],
.bg-popover, [class*="bg-popover"] {
  background: rgba(15, 31, 53, 0.7) !important;
  border-color: rgba(61, 160, 230, 0.18) !important;
  backdrop-filter: blur(8px);
}

/* === Borders genéricas (sutil ajuste) === */
.border, [class*="border-"] {
  border-color: rgba(61, 160, 230, 0.18);
}

/* === Login page específica === */
/* Alvo: container principal da tela de login */
[class*="login"], [class*="auth"], [data-page="login"] {
  background: transparent !important;
}

/* === Footer fixo TSTT (injetado via JS no body) === */
#tstt-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 20px;
  text-align: center;
  font-size: 11px;
  color: rgba(138, 155, 184, 0.55);
  background: linear-gradient(180deg, transparent 0%, rgba(5, 11, 24, 0.85) 100%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  pointer-events: none;
  z-index: 9999;
  letter-spacing: 0.3px;
}
#tstt-footer a {
  color: rgba(61, 160, 230, 0.7);
  text-decoration: none;
  pointer-events: auto;
}
#tstt-footer a:hover {
  color: var(--tstt-accent);
}

/* === Logo TROI no canto sup esquerdo (injetado via JS) === */
#tstt-corner-logo {
  position: fixed;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 50;
  text-decoration: none;
  color: var(--tstt-text);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 10px 6px 8px;
  background: rgba(10, 22, 40, 0.7);
  border: 1px solid rgba(61, 160, 230, 0.25);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  transition: all 0.18s ease;
}
#tstt-corner-logo:hover {
  border-color: var(--tstt-primary-light);
  background: rgba(15, 31, 53, 0.85);
}
#tstt-corner-logo img { height: 22px; width: auto; display: block; }
#tstt-corner-logo span { font-weight: 600; color: var(--tstt-primary-light); }

/* === Reduz padding do app pra acomodar footer fixo === */
body {
  padding-bottom: 36px !important;
}

/* === Scrollbar discreta === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tstt-bg-1); }
::-webkit-scrollbar-thumb {
  background: rgba(61, 160, 230, 0.3);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(61, 160, 230, 0.5);
}

/* === Selection === */
::selection {
  background: rgba(220, 31, 38, 0.4);
  color: white;
}