/* ── Fonte Montserrat (Manual de Marca SEEL) ───────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* ── Variáveis de marca SEEL ────────────────────────────────── */
:root {
  /* Cores SEEL — Manual de Marca */
  --seel-azul:         #004b87;   /* azul principal (fundo da marca) */
  --seel-azul-dark:    #003568;   /* azul escuro (sidebar, hover) */
  --seel-azul-mid:     #1a6fa8;   /* azul médio (secundário) */
  --seel-amarelo:      #f5e02d;   /* amarelo (letras da marca) */
  --seel-amarelo-dark: #d4c200;   /* amarelo escuro (hover) */
  --seel-branco:       #ffffff;
  --seel-cinza:        #f4f6f9;   /* fundo geral */

  /* Status de vencimento (funcionais — não alterar) */
  --cor-vencido:  #dc3545;
  --cor-30:       #fd7e14;
  --cor-60:       #e6a817;
  --cor-90:       #6c757d;
  --cor-ok:       #198754;
  --cor-liberacao:#0d6efd;

  --sidebar-w: 220px;
}

/* ── Base ────────────────────────────────────────────────────── */
body {
  background: var(--seel-cinza);
  font-family: 'Montserrat', sans-serif;
  font-size: .905rem;
  color: #1a2340;
}

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar-seel {
  background: var(--seel-azul) !important;
  border-bottom: 3px solid var(--seel-amarelo);
  height: 60px;
}
.navbar-seel .navbar-brand-logo {
  height: 38px;
  width: auto;
}
.navbar-seel .brand-text {
  line-height: 1.1;
}
.navbar-seel .brand-title {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--seel-amarelo);
}
.navbar-seel .brand-subtitle {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  height: calc(100vh - 60px);
  overflow-y: auto;
  background: var(--seel-azul-dark);
  position: sticky;
  top: 60px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,.06);
}
.sidebar .nav-link {
  border-radius: 6px;
  padding: .42rem .85rem;
  color: rgba(255,255,255,.72) !important;
  font-size: .84rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.sidebar .nav-link:hover {
  background: rgba(255,255,255,.1);
  color: #fff !important;
}
.sidebar .nav-link.active {
  background: var(--seel-amarelo) !important;
  color: var(--seel-azul-dark) !important;
  font-weight: 700;
}
.sidebar .nav-section {
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
  padding: .7rem .85rem .2rem;
  font-weight: 600;
}
.sidebar .sidebar-logo-wrap {
  padding: .85rem .85rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: .5rem;
}

/* ── Cards de alerta ────────────────────────────────────────── */
.card-stat {
  border-radius: 10px;
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
  border: none !important;
}
.card-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.13) !important;
}
.card-vencido  { border-top: 4px solid var(--cor-vencido)  !important; }
.card-30       { border-top: 4px solid var(--cor-30)       !important; }
.card-60       { border-top: 4px solid var(--cor-60)       !important; }
.card-90       { border-top: 4px solid var(--cor-90)       !important; }
.card-ok       { border-top: 4px solid var(--cor-ok)       !important; }
.card-liberacao{ border-top: 4px solid var(--seel-azul)    !important; }

/* ── Cards gerais ────────────────────────────────────────────── */
.card {
  border-radius: 10px;
  border: 1px solid rgba(0,75,135,.1) !important;
}
.card-header {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
}
.card-header.bg-white {
  border-bottom: 2px solid rgba(0,75,135,.08);
}

/* ── Badges de status (funcionais) ──────────────────────────── */
.badge-vencido  { background: var(--cor-vencido);  color: #fff; }
.badge-30       { background: var(--cor-30);       color: #fff; }
.badge-60       { background: var(--cor-60);       color: #1a2340; }
.badge-90       { background: var(--cor-90);       color: #fff; }
.badge-ok       { background: var(--cor-ok);       color: #fff; }
.badge-liberacao{ background: var(--seel-azul);    color: #fff; }
.badge-na       { background: #6c757d;             color: #fff; }

/* ── Linhas de tabela ────────────────────────────────────────── */
tr.row-na       td { background: #f8f9fa !important; color: #6c757d !important; }
tr.row-vencido  td { background: #fff0f0 !important; }
tr.row-30       td { background: #fff6ee !important; }
tr.row-60       td { background: #fffce6 !important; }
tr.row-90       td { background: #f8f9fa !important; }
tr.row-liberacao td { background: #eef3ff !important; }

/* ── Tabelas ─────────────────────────────────────────────────── */
.table-sm td, .table-sm th { vertical-align: middle; }
.table-hover tbody tr:hover { filter: brightness(.97); }
.table-dark { background: var(--seel-azul) !important; }
.table-dark th { background: var(--seel-azul) !important; font-weight: 600; letter-spacing: .03em; font-size: .82rem; }

/* ── Botões SEEL ─────────────────────────────────────────────── */
.btn-seel {
  background: var(--seel-amarelo);
  color: var(--seel-azul-dark);
  font-weight: 700;
  border: none;
  font-family: 'Montserrat', sans-serif;
}
.btn-seel:hover {
  background: var(--seel-amarelo-dark);
  color: var(--seel-azul-dark);
}
.btn-outline-seel {
  border: 2px solid var(--seel-azul);
  color: var(--seel-azul);
  font-weight: 600;
}
.btn-outline-seel:hover {
  background: var(--seel-azul);
  color: #fff;
}

/* ── Gráficos ────────────────────────────────────────────────── */
.chart-card { border-radius: 10px; }
.chart-card .card-header {
  border-radius: 10px 10px 0 0 !important;
  font-weight: 600;
  font-size: .84rem;
  color: var(--seel-azul);
  border-left: 4px solid var(--seel-amarelo);
}

/* ── Heatmap ─────────────────────────────────────────────────── */
.heatmap-cell {
  width: 36px; height: 36px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
  color: #fff;
  transition: transform .1s;
}
.heatmap-cell:hover { transform: scale(1.15); }

/* ── Score badge ─────────────────────────────────────────────── */
.score-badge {
  font-size: .74rem; font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
}
.score-critical  { background: #dc3545; color: #fff; }
.score-high      { background: #fd7e14; color: #fff; }
.score-medium    { background: #e6a817; color: #1a2340; }
.score-low       { background: #198754; color: #fff; }

/* ── Títulos de página ───────────────────────────────────────── */
.page-title {
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--seel-azul);
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.page-title::after {
  content: '';
  display: inline-block;
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--seel-amarelo), transparent);
  margin-left: .5rem;
  border-radius: 1px;
}

/* ── Links ───────────────────────────────────────────────────── */
a { color: var(--seel-azul); }
a:hover { color: var(--seel-azul-mid); }

/* ── Sync badge ──────────────────────────────────────────────── */
.sync-badge { font-size: .68rem; font-weight: 600; }

/* ── Barra de progresso % críticos ──────────────────────────── */
.progress { height: 8px; border-radius: 4px; background: rgba(0,0,0,.06); }
.progress-bar.bg-danger { background: var(--cor-vencido) !important; }

/* ── Sticky filter bar (abaixo do navbar fixo) ───────────────── */
.sticky-filter-bar {
  position: sticky;
  top: 60px;
  z-index: 100;
  background: var(--seel-cinza);
  padding-bottom: .5rem;
}

/* ── Sort indicator nos cabeçalhos de tabela ─────────────────── */
.sort-ind {
  font-size: .7em;
  color: rgba(255,255,255,.5);
  margin-left: .2rem;
}

/* ── Conteúdo principal ──────────────────────────────────────── */
/* margin-top tratado no container pai (d-flex) */

/* ── Caixa de usuário logado (rodapé da sidebar) ────────────── */
.user-box {
  background: rgba(0,0,0,.18);
  border-radius: .3rem;
  padding: .4rem .5rem;
  font-size: .65rem;
  color: rgba(255,255,255,.7);
}
.user-box__email {
  color: rgba(255,255,255,.85);
  font-size: .68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .25rem;
}
.user-box__meta { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.user-box__badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .5rem; border-radius: 1rem;
  font-size: .6rem; letter-spacing: .03em; text-transform: uppercase;
  background: rgba(255,255,255,.12); color: #fff;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-box__badge--admin { background: rgba(255,193,7,.18); color: #ffd24d; }
.user-box__badge--obra  { background: rgba(46,204,113,.18); color: #6ee7a3; }
.user-box__logout {
  color: rgba(255,255,255,.55); text-decoration: none;
  padding: .15rem .35rem; border-radius: .25rem; transition: background .15s, color .15s;
  flex-shrink: 0;
}
.user-box__logout:hover { background: rgba(255,255,255,.08); color: #ffb4ad; }

/* ── Indicador de status da WDP API (rodapé da sidebar) ─────── */
.wdp-status {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .65rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .35rem .5rem;
  border-radius: .3rem;
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.7);
  cursor: default;
}
.wdp-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}
.wdp-status--online .wdp-status__dot {
  background: #2ecc71;
  box-shadow: 0 0 0 2px rgba(46,204,113,.25), 0 0 6px rgba(46,204,113,.6);
  animation: wdp-pulse 2.4s ease-in-out infinite;
}
.wdp-status--offline .wdp-status__dot {
  background: #e74c3c;
  box-shadow: 0 0 0 2px rgba(231,76,60,.25);
}
.wdp-status--checking .wdp-status__dot {
  background: #f1c40f;
  box-shadow: 0 0 0 2px rgba(241,196,15,.2);
  animation: wdp-pulse 1.2s ease-in-out infinite;
}
.wdp-status--online  .wdp-status__label { color: rgba(255,255,255,.85); }
.wdp-status--offline .wdp-status__label { color: #ffb4ad; }
@keyframes wdp-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}