/*
 * SAFE — Tema Visual Energisa
 * Override do Bootstrap/CAPEv2 padrão
 * Inject via base.html: <link rel="stylesheet" href="{% static 'css/safe_theme.css' %}">
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Fira+Code:wght@400;500&display=swap');

/* ─── Variáveis de marca ─────────────────────────────────────── */
:root {
  --s-navy:       #101C31;
  --s-navy-mid:   #162540;
  --s-navy-card:  #1a2d4a;
  --s-navy-hover: #1e3255;
  --s-cyan:       #00E5FF;
  --s-cyan-dim:   rgba(0, 229, 255, 0.10);
  --s-cyan-glow:  rgba(0, 229, 255, 0.20);
  --s-green:      #00FF88;
  --s-green-dim:  rgba(0, 255, 136, 0.12);
  --s-silver:     #B0BEC5;
  --s-silver-dim: #6B7E8E;
  --s-red:        #FF4757;
  --s-orange:     #FFA040;
  --s-white:      #F0F4F8;
  --s-border:     rgba(0, 229, 255, 0.14);
  --s-border-mid: rgba(0, 229, 255, 0.25);

  --font-ui:   'Montserrat', -apple-system, sans-serif;
  --font-mono: 'Fira Code', 'Courier New', monospace;
}

/* ─── Reset base ─────────────────────────────────────────────── */
body {
  font-family: var(--font-ui) !important;
  background-color: var(--s-navy) !important;
  color: var(--s-white) !important;
}

/* ─── Navbar ─────────────────────────────────────────────────── */
.navbar,
.navbar-default {
  background: var(--s-navy-mid) !important;
  border-bottom: 1px solid var(--s-border) !important;
  box-shadow: none !important;
}

.navbar-brand {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.1em !important;
  color: var(--s-white) !important;
}

.navbar-brand span,
.navbar-brand .accent { color: var(--s-cyan) !important; }

.navbar-nav > li > a {
  color: var(--s-silver) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  transition: color 0.15s !important;
}

.navbar-nav > li > a:hover,
.navbar-nav > li.active > a {
  color: var(--s-cyan) !important;
  background: var(--s-cyan-dim) !important;
}

/* ─── Sidebar / nav lateral ──────────────────────────────────── */
.sidebar,
#sidebar,
.nav-sidebar {
  background: var(--s-navy-mid) !important;
  border-right: 1px solid var(--s-border) !important;
}

.nav-sidebar > li > a {
  color: var(--s-silver) !important;
  font-size: 0.82rem !important;
  border-radius: 6px !important;
  margin: 2px 8px !important;
  transition: background 0.15s, color 0.15s !important;
}

.nav-sidebar > li > a:hover,
.nav-sidebar > li.active > a {
  background: var(--s-cyan-dim) !important;
  color: var(--s-cyan) !important;
}

/* ─── Cards e painéis ────────────────────────────────────────── */
.panel,
.card,
.well {
  background: var(--s-navy-card) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--s-white) !important;
}

.panel-heading,
.card-header {
  background: rgba(0, 229, 255, 0.06) !important;
  border-bottom: 1px solid var(--s-border) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--s-cyan) !important;
  border-radius: 10px 10px 0 0 !important;
}

/* ─── Tabelas ────────────────────────────────────────────────── */
.table {
  color: var(--s-white) !important;
  font-size: 0.85rem !important;
}

.table > thead > tr > th {
  background: rgba(0, 229, 255, 0.06) !important;
  border-bottom: 1px solid var(--s-border-mid) !important;
  color: var(--s-cyan) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--s-border) !important;
  vertical-align: middle !important;
  font-family: var(--font-mono) !important;
  font-size: 0.8rem !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.025) !important;
}

.table-hover > tbody > tr:hover {
  background: var(--s-cyan-dim) !important;
}

/* ─── Badges de score / severidade ──────────────────────────── */
.label-danger,
.badge-danger  { background: var(--s-red)    !important; color: #fff !important; }
.label-warning,
.badge-warning { background: var(--s-orange) !important; color: #101C31 !important; }
.label-success,
.badge-success { background: var(--s-green)  !important; color: #101C31 !important; }
.label-info,
.badge-info    { background: var(--s-cyan)   !important; color: #101C31 !important; }
.label-default,
.badge-default { background: var(--s-silver-dim) !important; color: #fff !important; }

/* Score pill (malscore) */
.badge-score-high   { background: var(--s-red) !important;    color: #fff !important; }
.badge-score-medium { background: var(--s-orange) !important; color: var(--s-navy) !important; }
.badge-score-low    { background: var(--s-green) !important;  color: var(--s-navy) !important; }

/* ─── Botões ─────────────────────────────────────────────────── */
.btn-primary,
.btn-info {
  background: var(--s-cyan) !important;
  border-color: var(--s-cyan) !important;
  color: var(--s-navy) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: opacity 0.15s !important;
}

.btn-primary:hover,
.btn-info:hover {
  opacity: 0.85 !important;
  color: var(--s-navy) !important;
}

.btn-danger {
  background: var(--s-red) !important;
  border-color: var(--s-red) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
}

.btn-default,
.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--s-border-mid) !important;
  color: var(--s-silver) !important;
  font-size: 0.78rem !important;
}

.btn-default:hover { background: var(--s-cyan-dim) !important; color: var(--s-cyan) !important; }

/* ─── Inputs e formulários ───────────────────────────────────── */
.form-control {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: 6px !important;
  color: var(--s-white) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.form-control:focus {
  background: var(--s-cyan-dim) !important;
  border-color: var(--s-cyan) !important;
  box-shadow: 0 0 0 3px var(--s-cyan-glow) !important;
  color: var(--s-white) !important;
  outline: none !important;
}

.form-control::placeholder { color: var(--s-silver-dim) !important; }

/* ─── Abas (tabs) ────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--s-border) !important;
}

.nav-tabs > li > a {
  color: var(--s-silver-dim) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: color 0.15s, border-color 0.15s !important;
}

.nav-tabs > li > a:hover {
  color: var(--s-white) !important;
  border-bottom-color: var(--s-silver-dim) !important;
  background: transparent !important;
}

.nav-tabs > li.active > a {
  color: var(--s-cyan) !important;
  border-bottom: 2px solid var(--s-cyan) !important;
  background: transparent !important;
}

.tab-content {
  background: transparent !important;
  padding-top: 1rem !important;
}

/* ─── Pre / código ───────────────────────────────────────────── */
pre, code, .pre {
  font-family: var(--font-mono) !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--s-border) !important;
  color: var(--s-silver) !important;
  border-radius: 6px !important;
  font-size: 0.8rem !important;
}

code { color: var(--s-cyan) !important; padding: 0.1em 0.4em !important; }

/* ─── Alertas ────────────────────────────────────────────────── */
.alert-danger  { background: rgba(255,71,87,0.12)  !important; border-color: rgba(255,71,87,0.3)  !important; color: #ff8a93 !important; }
.alert-warning { background: rgba(255,160,64,0.12) !important; border-color: rgba(255,160,64,0.3) !important; color: #ffb870 !important; }
.alert-success { background: rgba(0,255,136,0.10)  !important; border-color: rgba(0,255,136,0.25) !important; color: #00cc6a !important; }
.alert-info    { background: var(--s-cyan-dim)      !important; border-color: var(--s-border-mid)  !important; color: var(--s-cyan) !important; }

/* ─── Progresso / status ─────────────────────────────────────── */
.progress {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 4px !important;
}
.progress-bar { background: var(--s-cyan) !important; }
.progress-bar-danger  { background: var(--s-red) !important; }
.progress-bar-warning { background: var(--s-orange) !important; }
.progress-bar-success { background: var(--s-green) !important; }

/* ─── Paginação ──────────────────────────────────────────────── */
.pagination > li > a {
  background: var(--s-navy-card) !important;
  border: 1px solid var(--s-border) !important;
  color: var(--s-silver) !important;
  font-size: 0.8rem !important;
}

.pagination > li > a:hover {
  background: var(--s-cyan-dim) !important;
  color: var(--s-cyan) !important;
}

.pagination > .active > a {
  background: var(--s-cyan) !important;
  border-color: var(--s-cyan) !important;
  color: var(--s-navy) !important;
  font-weight: 700 !important;
}

/* ─── Dropdowns ──────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--s-navy-card) !important;
  border: 1px solid var(--s-border-mid) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

.dropdown-menu > li > a {
  color: var(--s-silver) !important;
  font-size: 0.82rem !important;
  padding: 6px 16px !important;
}

.dropdown-menu > li > a:hover {
  background: var(--s-cyan-dim) !important;
  color: var(--s-cyan) !important;
}

/* ─── Tooltips ───────────────────────────────────────────────── */
.tooltip-inner {
  background: var(--s-navy-mid) !important;
  border: 1px solid var(--s-border-mid) !important;
  color: var(--s-white) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
}

/* ─── Rodapé ─────────────────────────────────────────────────── */
footer, .footer {
  background: var(--s-navy-mid) !important;
  border-top: 1px solid var(--s-border) !important;
  color: var(--s-silver-dim) !important;
  font-size: 0.72rem !important;
  font-family: var(--font-mono) !important;
}

/* ─── Títulos ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  color: var(--s-white) !important;
}

h1 { font-size: 1.5rem !important; letter-spacing: -0.01em !important; }
h2 { font-size: 1.2rem !important; }
h3 { font-size: 1rem !important; }

/* ─── Links ──────────────────────────────────────────────────── */
a { color: var(--s-cyan) !important; text-decoration: none !important; }
a:hover { color: var(--s-white) !important; text-decoration: none !important; }

/* ─── Scrollbar customizada ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--s-navy); }
::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,229,255,0.45); }

/* ─── Botão "Laudo IA" (já existente no _info.html) ─────────── */
.btn-laudo-ia {
  background: linear-gradient(135deg, var(--s-cyan), #0099cc) !important;
  color: var(--s-navy) !important;
  font-weight: 700 !important;
  border: none !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
}

/* ─── Circuit grid de fundo (sutil) ─────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,229,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* ─── Seleção de texto ───────────────────────────────────────── */
::selection {
  background: var(--s-cyan-glow) !important;
  color: var(--s-cyan) !important;
}

/* ── Abas (tabs) Bootstrap override ─────────────────────────── */
.nav-tabs,
.tab-content,
.nav-tabs .nav-link,
.nav-tabs .nav-item {
  background: transparent !important;
  border-color: rgba(0,229,255,0.18) !important;
}

.nav-tabs .nav-link {
  color: #8BAABB !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
}

.nav-tabs .nav-link:hover {
  color: #DCE8F0 !important;
  border-bottom-color: #8BAABB !important;
  background: transparent !important;
}

.nav-tabs .nav-link.active {
  color: #00E5FF !important;
  background: transparent !important;
  border-bottom: 2px solid #00E5FF !important;
}

/* ── Abas (tabs) Bootstrap override ─────────────────────────── */
.nav-tabs,
.tab-content,
.nav-tabs .nav-link,
.nav-tabs .nav-item {
  background: transparent !important;
  border-color: rgba(0,229,255,0.18) !important;
}

.nav-tabs .nav-link {
  color: #8BAABB !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
}

.nav-tabs .nav-link:hover {
  color: #DCE8F0 !important;
  border-bottom-color: #8BAABB !important;
  background: transparent !important;
}

.nav-tabs .nav-link.active {
  color: #00E5FF !important;
  background: transparent !important;
  border-bottom: 2px solid #00E5FF !important;
}

/* ── Wordmark SAFE — forçar cor correta ─── */
.navbar-brand span { color: #F0F4F8 !important; }
.navbar-brand span span { color: #00E5FF !important; }

/* ── Wordmark SAFE — override do seletor 'a' ─── */
.navbar-brand,
.navbar-brand:hover { color: #F0F4F8 !important; }
.navbar-brand > span { color: #F0F4F8 !important; }
.navbar-brand > span > span { color: #00E5FF !important; }