:root{
  --sj-bg: #0b1020;
  --sj-card: rgba(255,255,255,.06);
  --sj-border: rgba(255,255,255,.10);
  --sj-text: #e9edf7;
  --sj-muted: rgba(233,237,247,.70);
  --sj-grad: linear-gradient(135deg, #ff3d6e 0%, #ff8a00 35%, #2dd4bf 70%, #4f46e5 100%);
  --sj-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.sj-body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(79,70,229,.25), transparent 50%),
              radial-gradient(900px 500px at 80% 10%, rgba(45,212,191,.18), transparent 55%),
              radial-gradient(700px 500px at 50% 90%, rgba(255,61,110,.15), transparent 55%),
              var(--sj-bg);
  color: var(--sj-text);
  min-height: 100vh;
}

.sj-container{
  max-width: 980px;
}

.sj-topbar{
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(10,14,30,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sj-border);
}

.sj-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color: var(--sj-text);
}
.sj-logo{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:14px;
  background: var(--sj-grad);
  box-shadow: var(--sj-shadow);
  font-weight: 800;
  letter-spacing: .5px;
}
.sj-brand-text{
  font-weight: 800;
  letter-spacing: .3px;
}
.sj-chip{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--sj-border);
  padding:.35rem .6rem;
  border-radius: 999px;
  color: var(--sj-muted);
  font-size:.85rem;
  background: rgba(255,255,255,.04);
}

.sj-btn-soft{
  border-color: var(--sj-border) !important;
}

.sj-card{
  background: var(--sj-card);
  border: 1px solid var(--sj-border);
  border-radius: 18px;
  box-shadow: var(--sj-shadow);
}

.sj-card .card-title,
.sj-card h1, .sj-card h2, .sj-card h3{
  color: var(--sj-text);
}

.sj-muted{ color: var(--sj-muted); }

.sj-kpi{
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: .2px;
}

.sj-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--sj-border);
  background: rgba(255,255,255,.04);
  color: var(--sj-text);
  font-size: .85rem;
}
.sj-pill-dot{
  width:10px;height:10px;border-radius:50%;
  display:inline-block;
}

.sj-sport-gym{ --c:#e63946; }
.sj-sport-jiu{ --c:#1d3557; }
.sj-sport-cardio{ --c:#2a9d8f; }
.sj-sport-food{ --c:#f4a261; }
.sj-sport-other{ --c:#8338ec; }

.sj-sport-gym .sj-pill-dot,
.sj-sport-jiu .sj-pill-dot,
.sj-sport-cardio .sj-pill-dot,
.sj-sport-food .sj-pill-dot,
.sj-sport-other .sj-pill-dot { background: var(--c); }

.sj-bottomnav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(10,14,30,.85);
  border-top: 1px solid var(--sj-border);
  backdrop-filter: blur(10px);
  display:flex;
  justify-content: space-around;
  padding: .55rem .4rem calc(.55rem + env(safe-area-inset-bottom));
  z-index: 1030;
}

.sj-navitem{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap:.15rem;
  color: var(--sj-muted);
  text-decoration:none;
  font-size: .72rem;
}
.sj-navitem i{
  font-size: 1.15rem;
}
.sj-navitem:hover{
  color: var(--sj-text);
}
.sj-form{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sj-border);
  border-radius: 18px;
  padding: 1rem;
}

.sj-table{
  color: var(--sj-text);
}
.sj-table thead th{
  color: var(--sj-muted);
  border-bottom: 1px solid var(--sj-border);
}
.sj-table td, .sj-table th{
  border-color: var(--sj-border) !important;
}

.sj-hero{
  border-radius: 22px;
  padding: 1.1rem;
  background: linear-gradient(135deg, rgba(255,61,110,.18), rgba(45,212,191,.12), rgba(79,70,229,.16));
  border: 1px solid var(--sj-border);
}

.sj-mini{
  font-size: .85rem;
  color: var(--sj-muted);
}

/* Select vermelho (só onde você colocar a classe sj-select-red) */
.sj-select-red{
  border-color: #e63946 !important;
}

.sj-select-red:focus{
  border-color: #e63946 !important;
  box-shadow: 0 0 0 .25rem rgba(230,57,70,.25) !important;
}

/* opcional: texto do label acima também vermelho */
.sj-select-red-label{
  color: #e63946 !important;
}

/* ====== NUTRITION / FORMS: SELECT bonito no dark ====== */

/* Caixa do select (fechado) */
.sj-form .form-select{
  background-color: rgba(255,255,255,.06) !important;
  color: var(--sj-text) !important;
  border: 1px solid var(--sj-border) !important;
}

/* Foco do select */
.sj-form .form-select:focus{
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 0 0 0 .25rem rgba(255,255,255,.08) !important;
}

/* Seta do select (Bootstrap usa SVG em background-image) */
.sj-form .form-select{
  filter: none !important;
}

/* As opções do dropdown (quando abre) — deixa legível */
.sj-form .form-select option{
  background: #ffffff !important;
  color: #111111 !important;
}

/* Labels e texto dentro das caixas sj-form */
.sj-form,
.sj-form *{
  color: var(--sj-text) !important;
}
/* ===== BOTÕES (tirar o branco do btn-light no tema dark) ===== */
.sj-form .btn.btn-light{
  background-color: rgba(255,255,255,.10) !important; /* deixa escuro */
  color: var(--sj-text) !important;                   /* texto branco */
  border: 1px solid rgba(255,255,255,.18) !important;
}

.sj-form .btn.btn-light:hover{
  background-color: rgba(255,255,255,.14) !important;
}

.sj-form .btn.btn-light:active{
  transform: translateY(1px);
}

/* ================================
   MEASUREMENTS (e forms em cards)
   Corrige texto preto + inputs/selects + tabelas + btn-light
================================ */

/* Texto dentro dos cards (evita herdar preto) */
.sj-card,
.sj-card *{
  color: var(--sj-text);
}

/* Labels */
.sj-card .form-label{
  color: var(--sj-text) !important;
}

/* Inputs e selects no tema dark */
.sj-card .form-control,
.sj-card .form-select{
  background-color: rgba(255,255,255,.06) !important;
  color: var(--sj-text) !important;
  border: 1px solid var(--sj-border) !important;
}

/* Focus bonito */
.sj-card .form-control:focus,
.sj-card .form-select:focus{
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 0 0 0 .25rem rgba(255,255,255,.08) !important;
}

/* Dropdown option legível (quando abre) */
.sj-card .form-select option{
  background: #fff !important;
  color: #111 !important;
}

/* Botão branco do Bootstrap (btn-light) virando dark-friendly */
.sj-card .btn.btn-light{
  background-color: rgba(255,255,255,.10) !important;
  color: var(--sj-text) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
.sj-card .btn.btn-light:hover{
  background-color: rgba(255,255,255,.14) !important;
}

/* Tabelas (muito comum no measurements.php) */
.sj-card .table{
  --bs-table-color: var(--sj-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--sj-border);
  --bs-table-striped-color: var(--sj-text);
  --bs-table-striped-bg: rgba(255,255,255,.04);
}
.sj-card .table th,
.sj-card .table td{
  color: var(--sj-text) !important;
  border-color: var(--sj-border) !important;
}