:root {
  --loto-primary: #c62828;   /* vermelho de segurança */
  --loto-dark:    #181818;   /*#1c2431*/
  --loto-accent:  #ffb300;   /* amarelo tag */
}

body {
  background: #f4f6f9;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Navbar */
.loto-navbar {
  background: var(--loto-dark);
  border-bottom: 3px solid var(--loto-primary);
}
.loto-navbar .navbar-brand i { color: var(--loto-accent); }
.loto-navbar .nav-link.active { color: #fff !important; font-weight: 600; }

/* Login */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1c2431 0%, #33404f 100%);
}
.login-card {
  width: 100%;
  max-width: 400px;
  border: none;
  border-top: 4px solid var(--loto-primary);
}

/* Cartões e KPIs */
.kpi-card {
  border: none;
  border-left: 4px solid var(--loto-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.kpi-card .kpi-value { font-size: 2rem; font-weight: 700; line-height: 1; }

.card { box-shadow: 0 1px 3px rgba(0,0,0,.06); border: 1px solid #e6e9ee; }

/* Tabelas */
.table thead th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6c757d;
}

/* Badge de posição de fonte */
.pos-open   { background: #2e7d32; }
.pos-closed { background: #6c757d; }

/* Tag de LOTO */
.loto-tag {
  display: inline-block;
  background: var(--loto-accent);
  color: #000;
  border: 2px solid #000;
  border-radius: 4px;
  padding: .1rem .5rem;
  font-weight: 700;
  font-family: monospace;
}

/* Timeline de eventos */
.timeline { list-style: none; padding-left: 1rem; border-left: 2px solid #dee2e6; }
.timeline li { position: relative; padding: 0 0 1rem 1.25rem; }
.timeline li::before {
  content: '';
  position: absolute;
  left: -1.6rem;
  top: .25rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--loto-primary);
  border: 2px solid #fff;
}

.section-title {
  font-weight: 700;
  color: var(--loto-dark);
}

/* ===== DataTables Responsive: botão de expandir como plus-square ===== */
/* #ID alinhado ao topo (junto do título) e ícone [+] centralizado na vertical */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  position: relative;
  vertical-align: top;
  padding-left: 2rem !important;   /* calha para o ícone, sem sobrepor o texto */
}
/* remove o triângulo padrão e usa o glifo do Bootstrap Icons */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  content: "\f4fd" !important;              /* bi-plus-square */
  font-family: "bootstrap-icons" !important;
  font-weight: normal !important;
  border: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  color: #000 !important;                   /* contorno preto */
  font-size: 1.15rem;
  line-height: 1;
  position: absolute;
  left: .4rem;
  top: 50%;
  transform: translateY(-50%);              /* centro vertical da linha */
}
/* estado expandido -> dash-square */
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control::before {
  content: "\f2e9" !important;              /* bi-dash-square */
  border: 0 !important;
}

/* Cartões de seleção de projeto */
.project-pick { transition: transform .08s ease, box-shadow .08s ease; }
.project-pick:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-color: var(--loto-primary); }

/* ===== Respiro dos controles do DataTables dentro dos cards ===== */
/* "Mostrar/Buscar" (topo) e info/paginação (rodapé) ficavam colados nas bordas */
.card .dt-container.dt-bootstrap5 > .row:first-child,
.card .dt-container.dt-bootstrap5 > .row:last-child {
  margin-left: 0;
  margin-right: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}
.card .dt-container.dt-bootstrap5 > .row:first-child { padding-top: .85rem; padding-bottom: .25rem; }
.card .dt-container.dt-bootstrap5 > .row:last-child  { padding-top: .5rem;  padding-bottom: .85rem; }