/* ========== Color Theme Overrides ========== */
:root {
  --bs-primary: #D95578;   /* Pink Berry */
  --bs-info: #024873;      /* Biru Navy */
  --bs-success: #02735E;   /* Hijau Tua */
  --bs-warning: #F2D750;   /* Kuning Pastel */
  --bs-danger: #F2A766;    /* Orange Pastel */

  --bs-primary-rgb: 217, 85, 120;
  --bs-info-rgb: 2, 72, 115;
  --bs-success-rgb: 2, 115, 94;
  --bs-warning-rgb: 242, 215, 80;
  --bs-danger-rgb: 242, 167, 102;

  --bs-body-bg: #f8f9fa; /* abu muda bersih */
  --bs-body-color: #212529; /* teks gelap */
}

/* ===== Global ===== */
body {
  font-family: "Roboto Mono", monospace;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

a {
  text-decoration: none !important;
}

/* ===== Buttons ===== */
.btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-primary:hover { background-color: #b73f61; border-color: #b73f61; }

.btn-info { background-color: var(--bs-info); border-color: var(--bs-info); }
.btn-info:hover { background-color: #013654; border-color: #013654; }

.btn-success { background-color: var(--bs-success); border-color: var(--bs-success); }
.btn-success:hover { background-color: #015244; border-color: #015244; }

.btn-warning { background-color: var(--bs-warning); border-color: var(--bs-warning); color: #212529; }
.btn-warning:hover { background-color: #d1b843; border-color: #d1b843; color: #212529; }

.btn-danger { background-color: var(--bs-danger); border-color: var(--bs-danger); }
.btn-danger:hover { background-color: #d9894d; border-color: #d9894d; }

/* ===== Navbar ===== */
nav {
  background-color: var(--bs-primary);
  color: #fff;
}
nav .brand {
  font-weight: 700;
  color: #fff;
}

/* ===== Cards & Modals ===== */
.card-custom,
.rounded-lg,
.modal-content {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  color: var(--bs-body-color);
}

/* ===== Buttons ===== */
.btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-info { background-color: var(--bs-info); border-color: var(--bs-info); }
.btn-success { background-color: var(--bs-success); border-color: var(--bs-success); }
.btn-warning { background-color: var(--bs-warning); border-color: var(--bs-warning); color: #212529; }
.btn-danger { background-color: var(--bs-danger); border-color: var(--bs-danger); }

.btn:hover { opacity: 0.9; }

/* ===== Inputs ===== */
.form-control {
  background-color: #fff;
  border: 1px solid #ced4da;
  color: var(--bs-body-color);
}
.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ===== Tabs ===== */
.nav-pills .nav-link { color: var(--bs-primary); }
.nav-pills .nav-link.active {
  background-color: var(--bs-primary);
  color: #fff;
}

/* ===== Upload Box ===== */
#dropArea {
  border: 2px dashed var(--bs-secondary);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  color: var(--bs-body-color);
  background-color: #fff;
  transition: all 0.3s ease;
}
#dropArea:hover {
  border-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* ===== Links ===== */
a { color: var(--bs-primary); text-decoration: none; }
a:hover { color: var(--bs-info); text-decoration: underline; }

/* ===== Alerts ===== */
.alert-primary { background-color: var(--bs-primary); color: #fff; border: none; }
.alert-info { background-color: var(--bs-info); color: #fff; border: none; }
.alert-success { background-color: var(--bs-success); color: #fff; border: none; }
.alert-warning { background-color: var(--bs-warning); color: #212529; border: none; }
.alert-danger { background-color: var(--bs-danger); color: #fff; border: none; }