/*
 * Arquivo: public/assets/css/dojobs-dark-v16.css
 * Projeto: DoJobS Acompanhantes / MegaTabela
 * Criado em: 2026-06-06 04:08
 * Modificado em: 2026-06-06 04:08
 * Descrição: Hotfix visual v16 para tema global mais escuro e loading overlay sem bloco preto isolado.
 */

:root,
html,
body {
  --dojobs-bg-0: #030005;
  --dojobs-bg-1: #06000b;
  --dojobs-bg-2: #0b0014;
  --dojobs-panel: rgba(15, 4, 24, 0.90);
  --dojobs-panel-strong: rgba(8, 1, 14, 0.97);
  --dojobs-border: rgba(255, 0, 168, 0.22);
  --dojobs-border-soft: rgba(255, 0, 168, 0.11);
  --dojobs-text: #f7f1ff;
  --dojobs-muted: #bcaeca;
  --dojobs-pink: #ff00a8;
  --dojobs-purple: #b600ff;
}

html,
body {
  min-height: 100%;
  color: var(--dojobs-text) !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 0, 168, 0.13) 0%, rgba(255, 0, 168, 0.04) 24%, transparent 46%),
    radial-gradient(circle at 85% 30%, rgba(123, 0, 255, 0.11) 0%, transparent 42%),
    linear-gradient(180deg, var(--dojobs-bg-0) 0%, var(--dojobs-bg-1) 42%, var(--dojobs-bg-2) 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 0, 168, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 168, 0.018) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 78%);
}

/* Mantém o conteúdo acima da atmosfera escura. */
body > *:not(#loading-screen):not(#global-loading):not(.dojobs-loading-overlay) {
  position: relative;
  z-index: 1;
}

/* Cards, painéis e caixas principais mais fechados. */
.main-shell,
.page-shell,
.content-shell,
.container,
.wrap,
.card,
.section-card,
.hero-card,
.mega-card,
.mega-phone-card,
.filters-card,
.stats-card,
.stat-card,
.panel,
.box,
.search-panel,
.result-card,
.admin-card,
form,
fieldset {
  border-color: var(--dojobs-border-soft) !important;
}

.hero-card,
.section-card,
.mega-card,
.mega-phone-card,
.filters-card,
.stats-card,
.stat-card,
.result-card,
.admin-card,
.panel,
.box,
.search-panel {
  background: var(--dojobs-panel) !important;
  box-shadow: 0 14px 46px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(255, 0, 168, 0.045) !important;
  backdrop-filter: blur(10px);
}

header,
.topbar,
.navbar,
.header-shell,
.site-header {
  background: rgba(5, 0, 10, 0.88) !important;
  border-bottom-color: var(--dojobs-border-soft) !important;
  backdrop-filter: blur(12px);
}

a,
button,
.btn,
.nav-link,
.chip,
.badge,
input,
select,
textarea {
  border-color: var(--dojobs-border-soft) !important;
}

input,
select,
textarea {
  background: rgba(13, 3, 22, 0.90) !important;
  color: var(--dojobs-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(222, 205, 235, 0.52) !important;
}

/* Loading: tela inteira escura, sem empurrar layout e sem quadrado preto destacado. */
#loading-screen,
#global-loading,
.dojobs-loading-overlay,
.dojobs-loading-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 0, 168, 0.12) 0%, rgba(255, 0, 168, 0.045) 22%, transparent 48%),
    linear-gradient(180deg, #020004 0%, #050008 42%, #08000e 100%) !important;
  backdrop-filter: blur(4px);
  transition: opacity 0.38s ease, visibility 0.38s ease !important;
}

#loading-screen > *,
#global-loading > *,
.dojobs-loading-overlay > *,
.dojobs-loading-screen > * {
  max-width: min(92vw, 420px) !important;
}

/* Remove o retângulo preto interno que apareceu atrás do coração. */
#loading-screen .dojobs-heart-card,
#loading-screen .dojobs-heart-shell,
#loading-screen .heart-card,
#loading-screen .loading-card,
#loading-screen .logo-card,
#loading-screen [class*="heart-card"],
#loading-screen [class*="loading-card"],
#global-loading .dojobs-heart-card,
#global-loading .dojobs-heart-shell,
#global-loading .heart-card,
#global-loading .loading-card,
#global-loading .logo-card,
#global-loading [class*="heart-card"],
#global-loading [class*="loading-card"] {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

#loading-screen.is-hidden,
#global-loading.is-hidden,
.dojobs-loading-overlay.is-hidden,
.dojobs-loading-screen.is-hidden,
body.dojobs-loaded #loading-screen,
body.dojobs-loaded #global-loading {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.dojobs-loading-active {
  overflow: hidden !important;
}

body.dojobs-loaded {
  overflow: auto !important;
}

/* Evita que algum loading antigo fique ocupando espaço acima da página depois do fade. */
body.dojobs-loaded #loading-screen,
body.dojobs-loaded #global-loading {
  display: none !important;
}

/* MegaTabela: visual mais profundo. */
.mega-hero,
.mega-stats,
.mega-filters,
.mega-results,
.mega-detail,
.mega-source-box,
.mega-city-box {
  background: rgba(13, 3, 22, 0.92) !important;
  border: 1px solid var(--dojobs-border-soft) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
}

/* Admin da ativação: campos e avisos mais legíveis no tema escuro. */
.alert,
.error,
.notice,
.warning {
  background: rgba(55, 5, 30, 0.88) !important;
  border-color: rgba(255, 70, 150, 0.32) !important;
  color: #ffe8f5 !important;
}