:root {
  --brand-bg: #0b0f0f;
  --brand-card: #0f1414;
  --brand-border: #1f2a2a;
  --brand-text: #e5f2f2;
  --brand-muted: #9fbebe;
  --brand-teal: #14b8a6;
  --brand-teal-dark: #0f766e;

  --radius-lg: 18px;
  --radius-md: 14px;
}

.form-label{
  color: #FFF;
}

h1, h2, h3, h4, h5, h6 {
  color: #FFF;
}

/* ===== BASE ===== */
body {
  background: radial-gradient(
      900px 600px at 50% 0%,
      rgba(20, 184, 166, 0.1),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 35%),
    var(--brand-bg);
  color: var(--brand-text);
}

a {
  color: var(--brand-teal);
}
a:hover {
  color: var(--brand-teal-dark);
}

.text-muted-brand {
  color: var(--brand-muted);
}

/* ===== CARD ===== */
.card {
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.02),
      transparent 30%
    ),
    var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
}

/* ===== FORMS ===== */
.form-control,
.form-select {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--brand-border);
  color: var(--brand-text);
}

.form-control::placeholder {
  color: rgba(229, 242, 242, 0.55);
}

.form-control:focus,
.form-select:focus {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.18);
  color: var(--brand-text);
}

/* ===== BUTTONS ===== */
.btn-primary {
  background-color: var(--brand-teal);
  border-color: var(--brand-teal);
  color: #071010;
}

.btn-primary:hover {
  background-color: var(--brand-teal-dark);
  border-color: var(--brand-teal-dark);
  color: #071010;
}

/* ===== BTN BRAND (teal do tema) ===== */
.btn-brand {
  background-color: var(--brand-teal);
  border-color: var(--brand-teal);
  color: #071010;
  font-weight: 600;
}

.btn-brand:hover {
  background-color: var(--brand-teal-dark);
  border-color: var(--brand-teal-dark);
  color: #071010;
}

.btn-brand:focus {
  box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.18);
}

.btn-brand:disabled,
.btn-brand.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* outline no dark */
.btn-outline-primary {
  border-color: rgba(20, 184, 166, 0.55);
  color: var(--brand-teal);
}
.btn-outline-primary:hover {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.75);
  color: var(--brand-teal);
}

/* seu botão "outline-brand" (se existir no projeto) */
.btn-outline-brand {
  border-color: rgba(20, 184, 166, 0.55);
  color: var(--brand-teal);
}
.btn-outline-brand:hover {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.75);
  color: var(--brand-teal);
}

.btn-outline-danger {
  border-color: rgba(239, 68, 68, 0.55);
  color: rgba(239, 68, 68, 0.95);
}
.btn-outline-danger:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.75);
  color: rgba(239, 68, 68, 0.95);
}

/* ===== ALERT ===== */
.alert {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--brand-border);
  color: var(--brand-text);
}

/* ===== MODAL (DARK THEME) ===== */
.modal-content {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
    var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  color: var(--brand-text);
}

.modal-header,
.modal-footer {
  border-color: var(--brand-border);
}

.modal-title {
  color: var(--brand-text);
}

/* X do modal no dark */
.btn-close {
  filter: invert(1) grayscale(100%);
  opacity: .85;
}
.btn-close:hover { opacity: 1; }

/* Backdrop um pouco mais forte */
.modal-backdrop.show { opacity: .65; }

.list-group-item{
  background: rgba(255,255,255,0.03);
  border-color: var(--brand-border);
  color: var(--brand-text);
}
.list-group-item:hover{
  background: rgba(255,255,255,0.05);
}

/* ===== TABLE (DARK THEME) ===== */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--brand-text);
  --bs-table-border-color: var(--brand-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);

  color: var(--brand-text);
}

.table thead th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--brand-text);
  border-bottom: 1px solid var(--brand-border) !important;
}

.table tbody td,
.table tbody th {
  background: transparent;
  border-top: 1px solid var(--brand-border);
  color: var(--brand-text);
}

.table-responsive {
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* inputs dentro da tabela */
.table .form-control {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--brand-border);
  color: var(--brand-text);
}
.table .form-control:focus {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.18);
}

/* badge tipo */
.badge.bg-secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* =========================================================
   CHOICES.JS — PADRÃO DO PROJETO (substitui TomSelect)
   Use: <select class="js-choice" data-search="0|1">...</select>
   ========================================================= */

.choices {
  margin-bottom: 0 !important;
  width: 100%;
}

.choices__inner {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--radius-md) !important;

  min-height: 38px !important;
  padding: .375rem 2.25rem .375rem .75rem !important;

  color: var(--brand-text) !important;
  box-shadow: none !important;

  width: 100% !important;
}

.choices__input {
  background: transparent !important;
  color: var(--brand-text) !important;
  margin: 0 !important;
}

.choices__placeholder {
  opacity: 1 !important;
  color: rgba(229, 242, 242, 0.55) !important;
}

/* seta do single */
.choices[data-type*="select-one"]::after {
  border-color: rgba(229, 242, 242, 0.65) transparent transparent transparent !important;
  right: .85rem !important;
  margin-top: -2px !important;
}

/* foco verdinho igual input */
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--brand-teal) !important;
  box-shadow: 0 0 0 .25rem rgba(20, 184, 166, 0.18) !important;
}

/* dropdown */
.choices__list--dropdown{
  width: 100% !important;
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: rgba(10, 25, 28, 0.98) !important;
  border: 1px solid rgba(229, 242, 242, 0.12) !important;
  border-radius: var(--radius-md) !important;
  margin-top: 6px !important;
  overflow: hidden !important;
  backdrop-filter: blur(10px);
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  color: rgba(229, 242, 242, 0.92) !important;
  padding: 10px 12px !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.choices__item--selectable.is-selected {
  background: rgba(20, 184, 166, 0.12) !important;
  color: rgba(229, 242, 242, 1) !important;
}

/* remove bordas/linhas padrão do choices */
.choices__list--dropdown .choices__item--selectable::after {
  display: none !important;
}

/* botão X no multi */
.choices__button {
  filter: invert(1) grayscale(100%);
  opacity: .85;
}
.choices__button:hover { opacity: 1; }

/* tags multi (se usar) */
.choices__list--multiple .choices__item {
  background: rgba(20, 184, 166, 0.14) !important;
  border: 1px solid rgba(20, 184, 166, 0.25) !important;
  color: rgba(229, 242, 242, 0.95) !important;
  border-radius: 999px !important;
  padding: .2rem .55rem !important;
}

/* =========================================================
   FIX AUTOFILL (Chrome / Edge / Safari)
   Mantém cores do tema
   ========================================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);

  /* truque para sobrescrever o fundo amarelo */
  -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.35) inset !important;
  box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.35) inset !important;

  transition: background-color 9999s ease-out 0s;
}


.card-brand {
  color: #bebebe;
}