/* =========================================================================
   /tickets/assets/tema-halloween.css — tema sazonal de Halloween 🎃
   Liga sozinho no período definido em includes/header.php (classe
   html.tema-halloween). Cada pessoa pode desligar pelo rodapé.
   Não altera as cores de status dos chamados (elas têm significado).

   PARTE 1 — cores: gerada a partir de app.css, trocando o verde-água por
   laranja-abóbora e o azul por roxo. Se app.css ganhar regras novas com o
   verde, gere de novo (script: troca de 34,211,166 / #22d3a6 / 56,189,248).
   ========================================================================= */

html.tema-halloween {
  --accent: #ff7a1a;
  --accent-2: #a855f7;
  --bs-link-color-rgb: 255, 122, 26;
  --bs-link-hover-color-rgb: 168, 85, 247;
  --bs-primary-rgb: 255, 122, 26;
  --bs-info-rgb: 168, 85, 247;
}

html.tema-halloween body::after {
  background: radial-gradient(circle, rgba(255, 122, 26, .11), transparent 60%);
}

html.tema-halloween .topbar {
  --tb-accent: #ff7a1a;
}

html.tema-halloween .topbar .nav-link.active {
  background: rgba(255, 122, 26, .1);
}

html.tema-halloween .topbar .avatar {
  background: rgba(255, 122, 26, .1);
  border: 1px solid rgba(255, 122, 26, .3);
}

html.tema-halloween .topbar .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(255, 122, 26, .2);
}

html.tema-halloween .card.card-destaque {
  border-color: rgba(255, 122, 26, .45);
  background: linear-gradient(170deg, rgba(255, 122, 26, .07), var(--surface) 45%);
}

html.tema-halloween .form-control:focus,
html.tema-halloween .form-select:focus {
  box-shadow: 0 0 0 3px rgba(255, 122, 26, .18);
}

html.tema-halloween .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 122, 26, .18);
}

html.tema-halloween .btn-primary:hover,
html.tema-halloween .btn-success:hover {
  box-shadow: 0 10px 24px -10px rgba(168, 85, 247, .6);
}

html.tema-halloween .btn-outline-primary:hover,
html.tema-halloween .btn-outline-success:hover {
  --bs-btn-hover-border-color: rgba(255, 122, 26, .5);
}

html.tema-halloween .alert-info {
  background: rgba(168, 85, 247, .1);
  border-color: rgba(168, 85, 247, .35);
}

html.tema-halloween .alert-success {
  background: rgba(255, 122, 26, .1);
  border-color: rgba(255, 122, 26, .35);
}

html.tema-halloween .pagination {
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(255, 122, 26, .18);
}

html.tema-halloween .dropdown-menu {
  --bs-dropdown-link-active-bg: rgba(255, 122, 26, .15);
}

html.tema-halloween .stat .cab i {
  background: var(--c-bg, rgba(255, 122, 26, .12));
  border: 1px solid var(--c-bd, rgba(255, 122, 26, .3));
}

html.tema-halloween .stat.total {
  background: linear-gradient(160deg, rgba(255, 122, 26, .12), var(--surface) 60%);
}

html.tema-halloween .seletor-botao:focus-visible,
html.tema-halloween .seletor.aberto .seletor-botao {
  box-shadow: 0 0 0 3px rgba(255, 122, 26, .18);
}

html.tema-halloween .notif.tem-novas .notif-botao {
  border-color: rgba(255, 122, 26, .45);
}

html.tema-halloween .notif-ativar {
  background: rgba(255, 122, 26, .06);
}

html.tema-halloween .notif-icone.atualizacao {
  background: rgba(168, 85, 247, .12);
}

html.tema-halloween .notif-convite {
  border: 1px solid rgba(255, 122, 26, .45);
}

html.tema-halloween .notif-convite-icone {
  background: rgba(255, 122, 26, .12);
}

html.tema-halloween .lista-aba.ativa .contagem {
  background: var(--c-bg, rgba(255, 122, 26, .12));
  border-color: var(--c-bd, rgba(255, 122, 26, .35));
}

html.tema-halloween .passo-num {
  background: rgba(255, 122, 26, .14);
}

html.tema-halloween .tipo-opcao input:focus-visible + .tipo-cartao {
  box-shadow: 0 0 0 3px rgba(255, 122, 26, .3);
}

html.tema-halloween .tipo-opcao input:checked + .tipo-cartao {
  background: rgba(255, 122, 26, .08);
}

html.tema-halloween .anexo-zona:hover,
html.tema-halloween .anexo-zona.arrastando {
  background: rgba(255, 122, 26, .05);
}

html.tema-halloween .segmentado input:focus-visible + label {
  box-shadow: 0 0 0 2px rgba(255, 122, 26, .4);
}

html.tema-halloween .solicitante-eu .avatar {
  background: rgba(255, 122, 26, .1);
  border: 1px solid rgba(255, 122, 26, .3);
}

html.tema-halloween .tec-opcao:has(input:checked) {
  background: rgba(255, 122, 26, .08);
}

html.tema-halloween .tec-opcao input:checked ~ .tec-avatar {
  color: #2a1200;
}

html.tema-halloween .tec-opcao input:focus-visible ~ .tec-avatar {
  box-shadow: 0 0 0 2px rgba(255, 122, 26, .5);
}


/* =========================================================================
   PARTE 2 — ambiente e decorações
   ========================================================================= */

html.tema-halloween {
  --bg: #0c0a14;
  --bg-2: #120e1c;
  --surface: #17121f;
  --surface-2: #211a2c;
  --border: #2c2340;
  --border-strong: #3b2f55;
  --bs-body-bg: var(--bg);
}
html.tema-halloween .topbar {
  --tb-bg: #120e1c;
  --tb-surface: #211a2c;
  --tb-border: #2c2340;
  background:
    linear-gradient(180deg, rgba(168, 85, 247, .08), transparent),
    var(--tb-bg);
  border-bottom: 0;
  box-shadow: 0 1px 0 #2c2340;
}
/* Linha laranja → roxa sob a barra superior */
html.tema-halloween .topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, #ff7a1a 20%, #a855f7 80%, transparent);
  opacity: .8;
}

/* Brilho de "lua" roxa no fundo e névoa laranja embaixo */
html.tema-halloween body::after {
  background: radial-gradient(circle, rgba(168, 85, 247, .16), transparent 60%);
}
html.tema-halloween body {
  background:
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(255, 122, 26, .10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* Abóbora ao lado do nome do sistema */
html.tema-halloween .topbar .navbar-brand strong::after {
  content: " 🎃";
  font-size: .95em;
}

/* Teia de aranha no canto inferior esquerdo da tela */
html.tema-halloween .halloween-teia {
  position: fixed; left: 0; bottom: 0; width: 180px; height: 180px;
  pointer-events: none; z-index: 0; opacity: .22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23c4b5fd' stroke-width='1.2'%3E%3Cpath d='M0 200 L200 0M0 200 L120 0M0 200 L60 0M0 200 L200 80M0 200 L200 140'/%3E%3Cpath d='M0 170 Q20 165 26 174 Q40 160 52 168 Q62 152 74 158 Q86 150 92 160 Q102 162 112 172'/%3E%3Cpath d='M0 140 Q22 132 32 146 Q54 120 76 132 Q92 106 112 116 Q132 106 138 122 Q160 124 172 142'/%3E%3Cpath d='M0 104 Q30 96 42 112 Q70 76 100 92 Q120 58 150 72 Q178 64 186 88 Q200 92 200 104'/%3E%3Cpath d='M0 62 Q36 52 54 72 Q88 30 124 50 Q140 14 176 26 Q196 22 200 40'/%3E%3C/svg%3E") no-repeat left bottom / contain;
}

/* Morcegos voando pela parte de cima da tela */
html.tema-halloween .halloween-morcegos { position: fixed; inset: 0 0 auto 0; height: 260px; pointer-events: none; z-index: 0; overflow: hidden; } /* atrás do conteúdo: aparecem só nos espaços vazios */
html.tema-halloween .morcego {
  position: absolute; left: -60px; width: 34px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23140f1f' stroke='%23a855f7' stroke-opacity='.55' stroke-width='1' d='M32 12c1.5-3 1.5-5 1-7l2.5 3.5h-7L31 5c-.5 2-.5 4 1 7zM32 14c3-4 8-6 14-6-2 2-2.5 4-2 6 4-2 9-2 14 1-3 0-5 1.5-6 4 3 0 5 1 7 3-5-1-10 0-14 3-2-3-5-5-9-5-2 0-3.5 1-4 3-.5-2-2-3-4-3-4 0-7 2-9 5-4-3-9-4-14-3 2-2 4-3 7-3-1-2.5-3-4-6-4 5-3 10-3 14-1 .5-2 0-4-2-6 6 0 11 2 14 6z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .75;
  animation: morcego-voo 26s linear infinite, morcego-asa .35s ease-in-out infinite alternate;
}
html.tema-halloween .morcego:nth-child(1) { top: 70px;  animation-delay: 0s, 0s; }
html.tema-halloween .morcego:nth-child(2) { top: 140px; width: 24px; height: 13px; opacity: .5; animation-duration: 34s, .3s; animation-delay: -12s, .1s; }
html.tema-halloween .morcego:nth-child(3) { top: 30px;  width: 20px; height: 11px; opacity: .45; animation-duration: 41s, .28s; animation-delay: -25s, .05s; }
@keyframes morcego-voo {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(28vw, 26px); }
  50%  { transform: translate(55vw, -10px); }
  75%  { transform: translate(82vw, 30px); }
  100% { transform: translate(calc(100vw + 120px), 0); }
}
@keyframes morcego-asa { from { scale: 1 1; } to { scale: 1 .55; } }
@media (prefers-reduced-motion: reduce) {
  html.tema-halloween .halloween-morcegos { display: none; }
}

/* Fantasminha nas listas vazias */
html.tema-halloween .table .vazio .bi::before { content: "👻"; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
html.tema-halloween .table .vazio .bi { filter: grayscale(.2); opacity: .8; }

/* Botão principal com brilho de abóbora */
html.tema-halloween .btn-primary,
html.tema-halloween .btn-success {
  --bs-btn-color: #1a0d00;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

/* Rodapé */
html.tema-halloween .app-foot { border-top-color: #2c2340; }
.halloween-rodape { display: inline-flex; align-items: center; gap: 10px; }
.halloween-rodape .halloween-desligar { border: 0; background: none; padding: 0; color: var(--dim); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.halloween-rodape .halloween-desligar:hover { color: var(--muted); }
html:not(.tema-halloween) .halloween-so-tema { display: none !important; }
html.tema-halloween .halloween-so-normal { display: none !important; }


/* =========================================================================
   PARTE 3 — telas de acesso (login, solicitar acesso, esqueci/redefinir senha)
   Gerada a partir de assets/auth.css, do mesmo jeito que a parte 1.
   ========================================================================= */

html.tema-halloween {
  --accent: #ff7a1a;
  --accent-2: #a855f7;
}

html.tema-halloween body::after {
  background: radial-gradient(circle, rgba(255, 122, 26, .16), transparent 60%);
}

html.tema-halloween .wrap {
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 30px 90px -40px rgba(255, 122, 26, .25);
}

html.tema-halloween .steps .n {
  background: rgba(255, 122, 26, .1);
  border: 1px solid rgba(255, 122, 26, .25);
}

html.tema-halloween .alert.info {
  background: rgba(168, 85, 247, .1);
  border-color: rgba(168, 85, 247, .35);
}

html.tema-halloween .alert.ok {
  background: rgba(255, 122, 26, .1);
  border-color: rgba(255, 122, 26, .35);
}

html.tema-halloween .input input:focus {
  box-shadow: 0 0 0 3px rgba(255, 122, 26, .18);
}

html.tema-halloween .btn-entrar:hover {
  box-shadow: 0 10px 24px -10px rgba(168, 85, 247, .6);
}

html.tema-halloween .input select:focus {
  box-shadow: 0 0 0 3px rgba(255, 122, 26, .18);
}

/* Abóbora ao lado do nome do sistema na tela de acesso */
html.tema-halloween .brand strong::after { content: " 🎃"; font-size: .95em; }
/* Telas de acesso: os morcegos podem passar por cima do fundo, mas não do cartão */
html.tema-halloween .wrap { position: relative; z-index: 1; }


/* =========================================================================
   PARTE 4 — interruptor para ligar/desligar o tema (sem o prefixo
   html.tema-halloween: precisa aparecer também com o tema desligado)
   ========================================================================= */
.tema-switch {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 8px;
  border-radius: 8px; border: 1px solid var(--tb-border, var(--border)); background: transparent;
  color: var(--tb-muted, var(--muted)); font-family: "Inter", system-ui, "Segoe UI", sans-serif; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.tema-switch:hover { color: var(--tb-text, var(--text)); background: var(--tb-surface, var(--surface)); }
.tema-switch:focus-visible { outline: 2px solid #ff7a1a; outline-offset: 2px; }
.tema-switch-icone { font-size: 15px; line-height: 1; filter: grayscale(1); opacity: .6; transition: filter .2s, opacity .2s; }
.tema-switch-trilho { position: relative; width: 30px; height: 17px; border-radius: 999px; background: #334155; transition: background .2s; flex-shrink: 0; }
.tema-switch-trilho span { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #cbd5e1; transition: transform .2s, background .2s; }
.tema-switch[aria-checked="true"] { color: #ffb27a; border-color: rgba(255, 122, 26, .45); }
.tema-switch[aria-checked="true"] .tema-switch-icone { filter: none; opacity: 1; }
.tema-switch[aria-checked="true"] .tema-switch-trilho { background: #ff7a1a; }
.tema-switch[aria-checked="true"] .tema-switch-trilho span { transform: translateX(13px); background: #fff; }

/* Na barra de cima: antes do sininho */
.topbar .tema-switch { order: 3; margin-left: 10px; }
/* Nas telas de acesso: canto superior direito */
.tema-switch.flutuante { position: fixed; top: 14px; right: 14px; z-index: 20; background: var(--surface); border-color: var(--border-strong); }

@media (max-width: 991px) {
  .topbar .tema-switch { order: 2; margin-left: auto; }
  .topbar .tema-switch ~ .notif { margin-left: 8px; }
  .topbar .tema-switch .tema-switch-texto { display: none; }
}
/* Telas de acesso no celular: o interruptor entra no fluxo, acima do cartão (não cobre o login) */
@media (max-width: 880px) {
  body:has(> .tema-switch.flutuante) { flex-direction: column; align-items: center; }
  .tema-switch.flutuante { position: static; align-self: flex-end; margin: 0 0 10px; background: var(--surface); }
}