/*
 * Tema Warna Kustom:
 * Biru (Primary): #0d6efd
 * Merah (Expense): #dc3545
 * Oranye (Income): #fd7e14
 */

:root {
  --custom-blue: #0c121c;
  --custom-red: #6e3439;
  --custom-orange: #4b1273;
}

body {
  background-color: #f8f9fa;
}

/* Navbar menggunakan warna Biru */
.navbar-custom {
  background-color: var(--custom-blue);
}

/* Tombol submit utama */
.btn-primary {
  background-color: var(--custom-blue);
  border-color: var(--custom-blue);
}
.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

/* Warna untuk card dashboard */
.card-balance {
  border-left: 5px solid var(--custom-blue);
}
.card-income {
  border-left: 5px solid var(--custom-orange);
}
.card-expense {
  border-left: 5px solid var(--custom-red);
}

/* Warna teks untuk total */
.text-income {
  color: var(--custom-orange) !important;
  font-weight: bold;
}
.text-expense {
  color: var(--custom-red) !important;
  font-weight: bold;
}
.text-balance {
  color: var(--custom-blue) !important;
  font-weight: bold;
}

.text-pemasukan {
  color: #1175f7;
  font-weight: bold;
}
.text-pengeluaran {
  color: #f71d11;
  font-weight: bold;
}

/* Tombol mata untuk saldo */
#toggle-saldo {
  background: none;
  border: none;
  color: var(--custom-blue);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0 5px;
}
#toggle-saldo:hover {
  opacity: 0.8;
}

/*Tombol mata untuk pemasukan */
#toggle-pemasukan {
  background: none;
  border: none;
  color: var(--custom-orange);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0 5px;
}
#toggle-pemasukan:hover {
  opacity: 0.8;
}

/* Tombol mata untuk pengeluaran */
#toggle-pengeluaran {
  background: none;
  border: none;
  color: var(--custom-red);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0 5px;
}
#toggle-pengeluaran:hover {
  opacity: 0.8;
}

/* Form Input */
.form-card-pemasukan {
    border-top: 5px solid var(--custom-orange);
}
.btn-pemasukan {
    background-color: var(--custom-orange);
    border-color: var(--custom-orange);
    color: white;
}
.btn-pemasukan:hover {
    background-color: #e67312;
    border-color: #d96d11;
    color: white;
}

.btn-pengeluaran {
    background-color: var(--custom-red);
    border-color: var(--custom-red);
    color: white;
}
.btn-pengeluaran:hover {
    background-color: #e67312;
    border-color: #d96d11;
    color: white;
}

.form-card-pengeluaran {
    border-top: 5px solid var(--custom-red);
}
.btn-pengeluaran {
    background-color: var(--custom-red);
    border-color: var(--custom-red);
}