/* 1) Variáveis de Marca e Tipografia */
:root {
  --brand-primary: #0d6efd;
  --brand-secondary: #6c757d;
  --bg-page: #f1f3f5;
  --bg-card: #ffffff;
  --text-default: #343a40;
  --text-muted: #6c757d;
  --table-zebra: rgba(0, 0, 0, 0.03);
  --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.05);
}
body {
  background-color: var(--bg-page);
  color: var(--text-default);
  font-family: 'Inter', sans-serif !important;
}

/* 2) Navbar simples */
.navbar {
  background-color: var(--bg-card);
  box-shadow: var(--shadow-light);
}
.navbar-brand { font-weight: 600; }
.nav-link { color: var(--text-muted) !important; }
.nav-link:hover { color: var(--brand-primary) !important; }

/* 3) Cards / Form-card */
.form-card,
.card {
  background-color: var(--bg-card);
  border: none;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-light);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

/* 4) Tabelas */
.table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  border-radius: 0.5rem;
  overflow: hidden;
}
.table thead {
  background-color: var(--bg-page);
  position: sticky;
  top: 0;
  z-index: 2;
}
.table thead th {
  border: none;
  font-weight: 600;
  color: var(--text-default);
}
.table tbody tr {
  transition: background 0.2s;
}
.table tbody tr:nth-of-type(odd) {
  background-color: var(--table-zebra);
}
.table tbody tr:hover {
  background-color: rgba(13,110,253,0.08);
}
.table td, .table th {
  vertical-align: middle;
}

/* 5) Botões */
.btn {
  border-radius: 0.5rem;
  transition: box-shadow 0.2s, transform 0.1s;
}
.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-primary:hover {
  box-shadow: var(--shadow-light);
  transform: translateY(-1px);
}



/* 6) Inputs e selects */
/* 1) Remove a borda azul quando hover em inputs */
.form-control:hover {
  border-color: #ced4da;    /* cor padrão de borda Bootstrap */
}

/* 2) Personaliza o foco (quando clica/tab no input) */
.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.25); /* sombra sutil azul */
  border-color: #0d6efd;   /* mesma cor do .btn-primary */
}

/* 3) Override do autofill do Chrome para não ficar amarelo/azulado */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
}

/* 7) Progress bar */
.progress {
  height: 1.75rem;
  background-color: #e9ecef;
  border-radius: 0.75rem;
  overflow: hidden;
}
.progress-bar {
  font-weight: 500;
  color: #fff;
  line-height: 1.75rem;
}

/* 8) Responsividade extra */
@media (max-width: 768px) {
  .form-card, .card {
    padding: 1rem;
  }
  .table-responsive {
    font-size: 0.9rem;
  }
}

/* Inputs tipo submit viram botão */
input[type="submit"].form-control {
  /* herda o estilo do .btn-primary do Bootstrap */
  all: unset;               /* zera tudo */
  display: inline-block;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  background-color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  border-radius: 0.5rem;
  transition: box-shadow .2s;
}
input[type="submit"].form-control:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background-color: var(--bs-primary-dark);
  border-color: var(--bs-primary-dark);
}
input[type="submit"].form-control:focus {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

#offline-banner {
  border-radius: 0;
  font-weight: 500;
}