/* VisionSystem - Custom Styles */

:root {
  --bg-primary: #0f1117;
  --bg-card: #1a1f2e;
  --border-color: #2d3748;
  --text-muted: #6b7280;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #ffffff !important;
}

/* Forçar todo texto branco em elementos comuns */
p, span, small, label, h1, h2, h3, h4, h5, h6, li, td, th, div {
  color: inherit;
}

.text-muted {
  color: #adb5bd !important;
}

.card-header, .card-body, .card-footer {
  color: #ffffff !important;
}

small {
  color: #ffffff !important;
}

.form-check-label {
  color: #ffffff !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1a1f2e; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* Sidebar nav links */
.sidebar .nav-link {
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 2px;
  transition: background .15s;
}
.sidebar .nav-link:hover:not(.active) {
  background: rgba(255,255,255,.07);
}

/* Cards */
.card {
  border-radius: 12px;
}

/* Tables */
.table-dark {
  --bs-table-bg: transparent;
}
.table-dark th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
  border-bottom-color: #2d3748;
  font-weight: 600;
}
.table-dark td {
  border-bottom-color: #1f2937;
  vertical-align: middle;
}

/* Form controls dark */
.form-control:focus, .form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.15);
}

/* Buttons */
.btn { border-radius: 8px; }
.btn-sm { border-radius: 6px; }

/* Video canvas */
#videoCanvas, #overlayCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
}

/* Badge */
.badge { font-weight: 500; letter-spacing: .02em; }

/* Toasts */
.toast { min-width: 260px; }

/* Pagination dark */
.page-link {
  color: #9ca3af;
}
.page-item.active .page-link {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

/* Responsive sidebar */
@media (max-width: 768px) {
  .sidebar { width: 60px !important; }
  .sidebar span, .sidebar small, .sidebar .d-block { display: none !important; }
  main { margin-left: 60px !important; }
}