/* public/assets/css/app.css */
:root{
  --bg: #0b1220;
  --soft: #0f172a;
  --card: rgba(255,255,255,.08);
}

.bg-soft{
  background: radial-gradient(1200px 600px at 20% 10%, rgba(99,102,241,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(16,185,129,.14), transparent 55%),
              radial-gradient(800px 500px at 50% 100%, rgba(236,72,153,.10), transparent 55%),
              #0b1220;
  color: #e5e7eb;
}

.login-card{
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  border-radius: 18px;
}

.form-control{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #e5e7eb;
}

.form-control:focus{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.15);
  color: #e5e7eb;
}

.form-label{
  color: rgba(229,231,235,.75);
}

.btn-dark{
  border-radius: 14px;
}

.logo-badge{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(99,102,241,.18);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 20px;
}

.toggle-password{
  border-left: 0;
}
.toggle-password:hover{
  background: rgba(255,255,255,.08);
}

.btn-danger{
  border-radius: 14px;
  font-weight: 500;
}

.btn-danger:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(220,53,69,.35);
}

/* ======== Dark UI fixes (forms & tables) ======== */
.card{
  background: rgba(255,255,255,.06);
  border-radius: 18px;
}

.table-dark{
  --bs-table-bg: rgba(255,255,255,.04);
  --bs-table-striped-bg: rgba(255,255,255,.06);
  --bs-table-hover-bg: rgba(255,255,255,.08);
}

.form-control,
.form-select,
.input-group-text{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #e5e7eb !important;
}

.form-control::placeholder{
  color: rgba(229,231,235,.55) !important;
}

.form-control:focus,
.form-select:focus{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.15) !important;
  color: #e5e7eb !important;
}

.form-select option{
  background: #0b1220; /* para que al abrir el select se vea bien */
  color: #e5e7eb;
}

label.form-label{
  color: rgba(229,231,235,.75);
}
/* ===== Buttons Modern UI ===== */
.btn{
  border-radius: 14px;
}

.btn-soft{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #e5e7eb !important;
}

.btn-soft:hover{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.20) !important;
  transform: translateY(-1px);
}

.btn-ghost{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(229,231,235,.90) !important;
}

.btn-ghost:hover{
  background: rgba(255,255,255,.08) !important;
  transform: translateY(-1px);
}

.btn-danger{
  border-radius: 14px;
  font-weight: 600;
}

.btn-danger:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(220,53,69,.35);
}

.btn-group .btn{
  border-radius: 12px !important;
}

.badge{
  border-radius: 999px;
}

/* Acciones compactas y elegantes */
.action-btn{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  letter-spacing: .2px;
}

.action-btn .i{
  opacity: .9;
  font-size: 1rem;
}

#category_dropdown .list-group-item{
  border: 1px solid rgba(255,255,255,.10);
}
#category_dropdown .list-group-item:hover{
  background: rgba(255,255,255,.10) !important;
}
#category_dropdown .list-group-item.active{
  background: rgba(99,102,241,.20) !important;
}